Как добавить несколько обработчиков событий к одному событию в React.Яш

все:

интересно, возможно ли привязать несколько обработчиков событий к одному событию?

например:

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, который начинает отсчет времени нажатия кнопки,Я знаю, что это может быть predesignd в функцию переключения, но мне просто интересно, есть ли способ добавить эту часть в обработчик onClick?

спасибо

8
event-handling reactjs

4 ответов

Если вы хотите иметь несколько обратных вызовов, выполняемых при запуске 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, а здесь

5

для расширяемого способа, который не требует, чтобы компонент знал о компонентах, которые его используют-сохраните событие onClick перед его изменением. Это основные моменты, извлеченные из фактического рабочего кода:

.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;
2

add-multiple-event-handlers-to-same-event-in-react

возможно, вы устанавливаете несколько обработчиков щелчка на одной и той же цели!

https://gist.github.com/xgqfrms-GitHub/a36b56ac3c0b4a7fe948f2defccf95ea#gistcomment-2136607

jsx

<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>
0

группировать несколько действий в событии

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