如何将多个事件处理程序添加到 React.js 中的同一事件

Question

全部：

我想知道是否可以将多个事件处理程序绑定到同一个事件？

例如：

var LikeToggleButton = React.createClass({
    render: function(){
        (function toggle(){
            this.setState({liked:!like});
        }).bind(this);
        return (
            <div onClick={toggle}>TOGGLE LIKE</div>  
        );
    }
});

到目前为止一切似乎都很正常，但我想为该按钮添加另一个功能，这由其他选项决定：

例如，我有另一个名为 "count toggle" 的开关组件（可以是复选框或单选按钮等），启用后，LikeToggleButton 的按钮将添加另一个 onClick 处理程序，该处理程序开始计数单击按钮的次数，我知道它可以预先设计到切换功能中，但我只是想知道是否有办法将这部分附加到 onClick 处理程序？

谢谢

Answer 1

如果你想在触发 onClick 时执行多个回调，你可以让它们从外部传递，这样你就可以在 props 对象中访问它们。然后全部执行（注意：代码未测试）：

var LikeToggleButton = React.createClass({

    toggle: function() {
        this.setState({liked:!like});
    },

    handleClick: function(e) {
        e.preventDefault();
        this.toggle();
        for (var i=0, l<this.props.callbacks.length; i<l; i++) {
           this.props.callbacks[i].call();
        }
    },

    render: function() {            
        return (
            <div onClick={this.handleClick}>TOGGLE LIKE</div>  
        );
    }
});

但是，如果你想让组件在它们之间连接起来，你不应该通过调用处理程序内部的方法来实现。相反，您应该使用架构模式，其中 Flux 是显而易见的选择（但还有更多选择）。

看看Flux, and here you have more choices。

Answer 2

对于不需要组件了解使用它的组件的可扩展方式 - 在更改之前保存 onClick 事件。这是从实际工作代码中提取的亮点：

button.jsx

class Button extends React.Component {

  constructor(props) {
    super(props);
    this.state= { callback: false};
  }

  click(){
    //do stuff here
    if(this.state.callback) { this.state.callback.call(); }
  }

  render () {
    this.state.callback = this.props.onClick; // save the onClick of previous handler

    return (
      <button { ...this.props } type={ this.props.type || "button" } onClick={ this.click.bind(this) } className = this.props.className } >
        { this.props.children }
      </button>
    );
  }
}
export default Button;

然后在另一个组件中，您可以使用该按钮，它可以拥有自己的 onClick 处理程序：

class ItemButtons extends React.Component {
  itemClick () {
    //do something here;
  }

render () {
    const buttons = [
      (
          <Button onClick={ this.itemClick.bind(this) } className="item-button">
            <span>Item-Button</span>
          </Button>
      )
    ];

    return (<section>{ buttons }</section>);
}

export default ItemButtons;

Answer 3

也许您可以在同一个目标上设置多个点击事件处理程序，如下所述：https://gist.github.com/xgqfrms-GitHub/a36b56ac3c0b4a7fe948f2defccf95ea#gistcomment-2136607

代码（复制自上面的linke）：

<div style={{ display: 'flex' }}>
    <div style={{
            width: '270px',
            background: '#f0f0f0',
            borderRight: "30px solid red",
            minHeight: ' 500px',
            maxHeight: '700px',
            overflowX: 'hidden',
            overflowY: 'scroll',
        }}
        onClick={this.state.ClickHandler}
        onClick={this.stateHandleClick}
        className="sidebar-btn"
        >
        <button onClick={this.props.ClickHandler}>props</button>
        <button onClick={(e) => this.props.ClickHandler}>props</button>
        <button onClick={this.props.ClickHandler}>props</button>
        <button onClick={this.state.ClickHandler}>state</button>
 //...
</div>

Answer 4

对一个事件进行多项操作

onMouseDown={(e) => { e.stopPropagation(); alert('hello'); }}

如何将多个事件处理程序添加到 React.js 中的同一事件

How to add multiple event handlers to same event in React.js

event-handling

reactjs