javascript - 调用多个函数 'onClick'

Question

这是我的情况:

<button onClick={this.changeTimerStatus.bind(this)}>makeTimerCliccable</button>

<button onClick={this.state.hasBeenFinished ? this.confirmHandler : (this.state.hasDest == false || this.state.hasDest == undefined ? this.takeTaskHandler : this.finishHandler)}>

我有两个按钮，但我想要第二个。另外，我想与 this.confirmHandler 或 this.takeTaskHandler 一起执行 this.changeTimerStatus.bind(this) (第一个按钮上的函数) 当他们运行时。我该如何解决这个问题？

Answer 1

这应该适合你。这里还有一个沙箱，因此您可以看到它的运行情况:https://codesandbox.io/s/hardcore-bassi-2lwbu

    <button
      onClick={
        this.state.hasBeenFinished
          ? () => {
              this.changeTimerStatus();
              this.confirmHandler();
            }
          : !this.state.hasDest
          ? () => {
              this.changeTimerStatus();
              this.takeTaskHandler();
            }
          : this.finishHandler
      }
    >
       Click
    </button>

正如发帖者所提到的，您可以将所有这些逻辑移动到一个事件处理程序中，就像这样并将其与事件监听器配对

handleClick = () => {
   this.state.hasBeenFinished
       ? () => {
           this.changeTimerStatus();
           this.confirmHandler();
         }
       : !this.state.hasDest
       ? () => {
           this.changeTimerStatus();
           this.takeTaskHandler();
          }
       : this.finishHandler
}

然后在按钮中:

<button onClick={this.handleClick}>Click</button>

这样做的好处是:

1. 防止因使用匿名而导致不必要的重新渲染在渲染期间充当事件处理程序。
2. 清理标记，以便更容易阅读背后的逻辑你的组件。