点击事件处理器中调用多个Props方法的实现方式咨询

当然可以直接用你提到的第一种方式！完全不需要预先把这两个props方法合并成单个props的。

在React的事件处理器里，那个箭头函数本质上就是一段普通的JavaScript代码块，所以你完全可以在里面依次调用多个props方法，就像你写的：

onClick={() => {this.props.prop1(); this.props.prop2()}}

这种写法是完全合法且有效的，React会正常执行这两个方法。

给你举个实际的组件例子，更直观：

class ActionButton extends React.Component {
  render() {
    return (
      <button onClick={() => {
        // 直接调用两个父组件传过来的props方法
        this.props.logUserAction();
        this.props.updateUIState();
      }}>
        执行操作
      </button>
    );
  }
}

点击这个按钮后，logUserAction和updateUIState两个props方法会依次执行，完全符合预期。

如果你觉得这种写法在多个地方重复出现，或者想让代码更整洁，也可以在组件内部封装一个专属方法来整合这两个调用，比如：

class ActionButton extends React.Component {
  handleButtonClick = () => {
    this.props.logUserAction();
    this.props.updateUIState();
  };

  render() {
    return <button onClick={this.handleButtonClick}>执行操作</button>;
  }
}

但要注意，这种封装只是可选的优化手段，不是必须的。如果只是在一个地方用到，直接在箭头函数里调用两个props方法完全没问题，没必要多此一举去合并props。

总的来说，直接在事件处理器中调用多个props方法的写法是完全可行的，不用特意去合并成单个props，怎么方便怎么来就行~

内容的提问来源于stack exchange，提问作者flimflam57