如何在一个 onClick(ReactJS) 中调用一个类和 setState

Question

我对 React 还很陌生，我想知道如何在一个类中调用一个函数（比如 this.handleChange）和一个带有 setState 的箭头函数，在一个按钮的一个 onClick 中。我试过在两行代码之间使用逗号和 && 。<button name="Plus" onClick={() => this.setState({ Operator: 'plus' }) && this.handlePlus}>+</button>上面的代码在render和return里面。预期的结果是代码调用函数并改变状态。相反，它只是改变状态（所以只有第一部分）。请帮忙，先谢谢了！

Answer 1

setState()有一个可选的第二个参数，它是一个函数，一旦设置了状态就会被调用。你可以这样做：

this.setState({ Operator: 'plus' }, this.handlePlus);

您还可以使用componentDidUpdate生命周期：

componentDidUpdate(prevProps, prevState) {

  if(this.state.Operator === 'plus' && prevState.Operator !== 'plus') {

    this.handlePlus();

  }

}

Answer 2

只需this.setState({ Operator: 'plus' }在handlePlus函数内添加。

Answer 3

< button name = "Plus"

onClick = {

  () => this.setState({

    Operator: 'plus'

  }, () => this.handlePlus())

} > + < /button>

this would work fine.or

if you are looking

for something like this....

you can handle multiple buttonClick event like this

  <

  button name = "Plus"

value = "yourValue"

onClick = {

  this.handleChange

} > + < /button>

handleChange = (e) => {

  const {

    name,

    value

  } = e.target;

  switch (name) {

    case 'Plus':

      this.setState({

        [name]: value

      });

      break;

    default:

      //enter code here

      break;

  }

}