ReactJS:类似于JQuery`ON()`的事件委托

Question

我是React.js的新手。我创建了一个列表组件，其中经常添加/删除项目。每个项目都应单击和/或悬停事件。

我想使用 on(event, selector, data, handler)方法在jQuery中以类似的方式进行事件委托，以便我可以在列表父元素上绑定/解开事件，而不必担心事件绑定/binting/bigning bint/unlinding aidd/explion <<<<<<<<<<。/p>

Answer 1

正如文档所说的，

用反应元素处理事件与在DOM元素上处理事件非常相似。反应事件是使用骆驼而不是小写的。使用JSX，您可以将功能作为事件处理程序，而不是字符串。（https://facebook.github.io/react/docs/handling-events.html）

假设您将类用作React组件，如果您希望每个项目都有单击和/或Hover事件，则只需在类中键入这些Inside Render（）方法：

<a onClick={this.onClickEventHandler}
   onMouseEnter={this.onMouseEnterEventHandler}
   onMouseLeave={this.onMouseLeaveEventHandler}>
sample item
</a>

之后，您可以在您的班级中声明这些事件处理程序（Onclickeventhandler，onMouseEntereventHandler和OnMouseleAveEventHandler），并告诉他们该怎么做。

最后，您需要在类构造函数中绑定事件处理程序：

constructor(props){
  super(props);
  this.onClickEventHandler = this.onClickEventHandler.bind(this);
  this.onMouseEnterEventHandler= this.onMouseEnterEventHandler.bind(this);
  this.onMouseLeaveEventHandler= this.onMouseLeaveEventHandler.bind(this);
}

有关事件处理的示例，请参见此plunker。

您以后可以通过实现"提升状态"的概念在父组件中使用这些事件。这样，您可以通过在子组件中触发事件在父组件中运行方法。请参阅此plunker，以示例在React中提升状态。

Answer 2

在React中，而不是使用选择器来绑定/解开事件，我们通常将合成事件处理程序直接添加到儿童中。在列表之类的组件中，每当更新列表项（添加/删除/编辑等...）时，父母会重新发送。因此，在您的渲染功能中，您可能会执行类似的操作：

render(){
  // your list component will either keep the items in its state, 
  // or receive them as props from its parent or from a store like redux.
  const { listItems } = this.props;
  
  // then, adding your event handlers is simply a matter of mapping over 
  // your list items and rendering your desired jsx from each item:
  const renderedItems = () => {
    return listItems.map(item => {
      return (
        <div 
          onClick={ this.handleClick(item) }
          onMouseEnter={ this.handleMouseEnter(item) }>
          { item.text }
        </div> 
      );
    });
  };
  
  // then it's just a matter of calling your rendered items 
  // in render's return:
  
  return(
    <div>
      { renderedItems() }
    </div>
  )
}

请注意，使用React的CreateClass（）函数的组件中无需绑定，因为React会自动处理绑定。