React中点击事件onClick后如何进行状态更新setState并执行函数

Question

你好！

在onClick事件中触发多个函数是否可能？

当用户单击我的按钮时，我希望能够设置状态并运行一个函数。我已经成功更新了我的状态，但我不确定如何继续添加第二步，即运行我的名为“goToOrderTemplate（）”的函数。

<button
  type="button"
  className="btn btn-primary"
  style={{ width: 250 }}
  onClick={() =>
    this.setState({
      auth: this.passwordValidation()
    })
  }
>

非常感谢您提供的任何帮助！

- Kev

---

为什么不在setState之后执行呢？如果你需要等待setState执行完成，那么可以使用第二个参数回调函数来执行。但是你应该将其作为最后的选择。 - Dimitri Kopriwa

Answer 1

setState方法还接受一个回调函数作为第二个参数，当状态设置完成后会被调用。如果goToOrderTemplate方法依赖于状态的设置，请使用该回调函数：

this.setState({
  auth: this.passwordValidation(),
}, goToOrderTemplate)

一般情况下，如果您想调用两个函数，只需按以下方式操作：

onClick={() => { 
  this.setState({
    auth: this.passwordValidation(),
  });
  goToOrderTemplate();
}}

- Jonas Wilms

---

使用回调函数来setState不应该是首选的解决方案。我们甚至不知道他想做什么。只有在极少数情况下才应该使用cb来setState。我怀疑这不是一个这样的情况。 - Dimitri Kopriwa

Answer 2

你可以将一个回调函数作为第二个参数传递给this.setState方法

this.setState({
  auth: this.passwordValidation()
}, () => {
  goToOrderTemplate()
})

- Gabriel Santos

---

1. 答案是在上面的答案同时给出的。
2. 标记为正确的答案并不能确保setState之后函数会被执行。
3. 是的，箭头函数有点无用 =]

- Gabriel Santos