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.changeTimerStatus.bind(this)或this.confirmHandler一起执行this.takeTaskHandler（第一个按钮上的功能）。我该怎么解决？

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>

这样做的好处是：

防止使用匿名导致不必要的重新渲染在渲染过程中充当事件处理程序。
清理标记，以便更轻松地阅读背后的逻辑您的组件。

Answer 2

只需将内容包装在函数中即可。

onClick={e => {
    fun1()
    fun2()
}}

Answer 3

这里接受的答案将起作用，但这不是在标记（在本例中为jsx）中使用任何逻辑的好习惯。我建议创建一个处理程序，

class YourComponent extends React.Component {
    state = {
        // Whatever you store in the state
    };

    constructor(props) {
        super(props);

        this.clickHandler = this.clickHandler.bind(this);
    }

    clickHandler() {
        // this.state
        // ...logic can go here
        // it should be the same logic as it is in the accepted answer
    }

    render() {
         return (
              <button type="button" onClick={ this.clickHandler }>
                  BUTTON
              </button>
         );
    }
}

调用多个函数“ onClick”

3 个答案: