Question

我们正在创建一个新网站，我们选择reactjs来做到这一点。现在我正在研究javascript中的事件，幸运的是我偶然发现了这个网站，他教导how to handle events for many elements并让父母处理事件，基本上就是我们现在正在为网站做的事情。

当我继续研究时，我也偶然发现了answer here（更多反应导向），它说我会将函数/方法从父级传递给子级。

它的推广方式与第一个链接上提到的相同吗？另外，这是在reactjs中执行此操作的方式（如处理事件的第一个链接）吗？我应该沿着这条线实施吗？

跟进问题......或者我应该单独询问？

如果我有

<Parent>
  <ChildComponent>
  <ChildComponent>
  ...

点击一个孩子我给它添加了一个类，比如说.selected。但我需要将其删除给其他人，因为他们不再被选中。在jQuery中我可以做类似

的事情

$('.child-components').removeClass('selected');
$(this).addClass('selected');

如何以反应的方式做到这一点？

Answer 1

对于您的第一个问题，它将取决于具体情况以及父组件和子组件之间的关系。

例如，处理一个子组件的click事件（在同一父组件下的许多类似的其他组件中）最好由父组件完成。

但作为一个反例，请考虑一个文本输入的组件。它可能会在将其传递给父级（可能是处理提交的表单）之前执行自己的验证，在这种情况下，处理更改事件最好在组件本身而不是父级中完成。

通常，是的，处理事件的React方法是根据需要将事件处理函数从父级传递给子级。

对于第二个问题，您只需要将所选子组件的索引（或其他ID）存储在父state中。然后，在父render方法中（我假设子组件也被渲染），使用该信息将.selected类添加到正确的子组件中。因此父母知道选择了哪个孩子，并负责正确地渲染它们。

反过来，您可以使用从父级传递到的父级点击处理函数，根据子级事件（例如，在单击子级时设置选择）更新父级state。孩子通过props。

希望这有帮助！

Answer 2

您提到的文章正在使用事件冒泡。它附加了一个事件处理程序，并允许所有事件冒泡到它。这是一个非常好的方法，它实际上是React在内部所做的。当您执行<div onClick={this.handleClick} />时，似乎只是将事件处理程序直接附加到元素，但React所做的只是为顶部节点设置一个单击侦听器。如果该事件冒泡到该元素，它只会调用您的this.handleClick。

对于你的第二个问题，你会做这样的事情：

var Child = React.createClass({
  render: function () {
    return <li className={this.props.className} onClick={this.props.onClick}>{this.props.text}</li>;
  }
});

var Parent = React.createClass({
  getInitialState: function () {
    var items = [
      {text: 'One'},
      {text: 'Two'},
      {text: 'Three'}
    ];
    var selected = items[0];

    return {
      items: items,
      selected: selected
    };
  },
  handleClick: function (item) {
    this.setState({selected: item});
  },
  render: function () {
    var self = this;

    return (
      <ul>
        {this.state.items.map(function (item) {
          return (
            <Child 
              key={item.text}
              className={this.state.selected === item ? 'selected' : ''}
              onClick={self.handleClick.bind(self, item)}
              text={item.text}
            />
          );
        })}
      </ul>
    );
  }
});

这是一个有效的JSBin：http://jsbin.com/libunecaba/1/edit?js,output

Answer 3

您不必担心事件委派（使用React，您可以使用一个公共父元素处理来自多个子节点的事件的技术）。您的React代码生成合成事件，而不是真正的DOM事件，并且库完成将实际事件处理程序附加到根节点的所有工作。

React方法将事件处理程序作为props传递的原因是为了便于重用单个组件。如果构建组件以将事件处理程序作为道具，则可以在需要对这些处理程序进行更改的情况下使用这些组件。

处理反应事件

3 个答案: