javascript - 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 函数已经绑定(bind)到您的组件实例，因此您应该直接将其提供给 onClick 处理程序，而无需编写该箭头函数，如下所示:

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