Вызовите более одной функции 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.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>

Преимущества этого:

1. Предотвращает ненужные повторные рендеры, вызванные использованиеманонимные функции как обработчики событий во время рендеринга.
2. Очищает разметку, чтобы было проще читать логику вашего компонента.

Answer 2

Ответ, который принят здесь, будет работать, но это не очень хорошая практика - использовать какую-либо логику внутри разметки (в данном случае 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>
         );
    }
}

Answer 3

Просто оберните содержимое в функцию.

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