处理反应事件

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

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

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

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

一般来说，是的，React 处理事件的方式是根据需要将事件处理函数从父级传递给子级。

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

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

希望这会有所帮助！

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