Question

我有一个状态的组件：{likes：123} 我显示了＆＃39;喜欢＆＃39;旁边的喜欢的数量。按钮。如何实现此按钮的功能，所以当我单击它时，它会添加到喜欢（所以state.likes = 124），然后如果我想再次点击它再回到之前的状态（state.likes） = 123）。当然，它始终显示正确的喜欢数量。这是我到目前为止所得到的：

＆＃13;

class ProfileInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      likes: this.props.likes,
    };
  }
  handleLike = () => {
    this.setState(prevState => ({
      likes: prevState.likes + 1,
    }));
  }
  render() {
    return (
      <div>
        <button className="like-button" onClick={this.handleLike}>
          Like
        </button>
      </div>
    );
  }
}

export default ProfileInfo;

＆＃13;

它只是添加了喜欢的东西。

Answer 1

您可以执行以下操作。

Here is a codesandbox包含更完整的代码版本。

{
    Id:1,
    List1: ['a','b'],
    List2: ['c','d]
}

像按钮一样反应切换

1 个答案: