freeCodeCamp/curriculum/challenges/chinese/03-front-end-libraries/react/write-a-simple-counter.md

id, title, challengeType, forumTopicId

id	title	challengeType	forumTopicId
5a24c314108439a4d4036177	写一个简单的计数器	6	301425

--description--

你可以结合目前为止所涵盖的概念来设计更复杂的有状态组件。这包括初始化state，编写设置state的方法，以及指定单击处理程序来触发这些方法。

--instructions--

Counter组件跟踪state中的count值。有两个按钮分别调用increment()和decrement()方法。编写这些方法，使计数器值在单击相应按钮时增加或减少 1。另外，创建一个reset()方法，当单击 reset 按钮时，把计数设置为 0。

注意： 确保你没有修改按钮的classNames。另外，请记住在构造函数中为新创建的方法添加必要的绑定。

--hints--

Counter应该返回一个div元素，它包含三个按钮，按钮内容依次是Increment!、Decrement!、Reset。

assert(
  (() => {
    const mockedComponent = Enzyme.mount(React.createElement(Counter));
    return (
      mockedComponent.find('.inc').text() === 'Increment!' &&
      mockedComponent.find('.dec').text() === 'Decrement!' &&
      mockedComponent.find('.reset').text() === 'Reset'
    );
  })()
);

Counter应该使用设置为0的count属性初始化 state。

const mockedComponent = Enzyme.mount(React.createElement(Counter));
assert(mockedComponent.find('h1').text() === 'Current Count: 0');

单击 increment 按钮应将计数增加1。

const mockedComponent = Enzyme.mount(React.createElement(Counter));
mockedComponent.find('.inc').simulate('click');
assert(mockedComponent.find('h1').text() === 'Current Count: 1');

单击 decrement 按钮应将计数减少1。

const mockedComponent = Enzyme.mount(React.createElement(Counter));
mockedComponent.find('.dec').simulate('click');
assert(mockedComponent.find('h1').text() === 'Current Count: -1');

单击 reset 按钮应将计数重置为0。

const mockedComponent = Enzyme.mount(React.createElement(Counter));
mockedComponent.setState({ count: 5 });
const currentCountElement = mockedComponent.find('h1');
assert(currentCountElement.text() === 'Current Count: 5');
mockedComponent.find('.reset').simulate('click');
assert(currentCountElement.text() === 'Current Count: 0');

--solutions--