setState 不适用于多个 onClick 函数答案

【问题标题】：setState is not working with multiple onClick functionsetState 不适用于多个 onClick 函数
【发布时间】：2019-09-17 01:57:25
【问题描述】：

我有一个奇怪的问题，并尝试调试了几个小时，仍然无法找出原因。我有一个 onClick 按钮，用于处理其他 2 个功能，如果我有 2 个功能，setState 一个不起作用，如果我只保留一个功能，setState 会起作用，但我需要两个功能。

Here's my code （当我在这里重现问题时，它似乎可以工作，但示例它不是更新 API，它只是改变状态）

感谢您的帮助！

class RecipeReviewCard extends React.Component {
  constructor(props) {
    super();
    this.state = {
      expanded: false,
      in: false,
      text: false
    };
  }

  handleClick = () => {
    this.setState(state => ({ expanded: !state.expanded }));
  };
   /* If I comment out this one, first setState will work */
  handleClick = e => {
    this.setState({ in: !this.state.in });
   /* This come from parent props to update API */
    this.props.updateThing(e.target.value)
  };

<Button
   className={classes.button}
   onClick={e => this.handleClick()}
>

【问题讨论】：

你没有调用 handleExpandClick
对不起，我复制了错误的代码，我确实为其他 2 个函数调用了 handleClick，只是更新我的问题。谢谢

标签： javascript reactjs ecmascript-6 setstate

【解决方案1】：

在你的构造函数中，你应该调用super(props); 见：https://overreacted.io/why-do-we-write-super-props/

在您的 Button 中 - 您没有将事件对象传递给您的事件处理程序。

<Button
   className={classes.button}
   onClick={e => this.handleClick(e)} // note the e here.
>

由于您的 handleClick 函数已经绑定到您的组件实例，您应该直接将其提供给 onClick 处理程序，而无需编写该箭头函数，如下所示：

<Button
   className={classes.button}
   onClick={this.handleClick}
>

【讨论】：