setState 不适用于多个 onClick 函数

Question

我有一个奇怪的问题，并且已经尝试调试了几个小时，仍然找不到原因。我有一个 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()}
>

Answer 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}
>

setState 不适用于多个 onClick 函数

setState is not working with multiple onClick function

javascript

setstate

ecmascript-6

reactjs