Events 处理react事件

我们正在创建一个新站点，我们选择了reactjs来实现这一点。现在，我正在研究javascript中的事件，幸运的是，我偶然发现了这个网站，他在那里教授并让家长处理事件，这基本上也是我们现在为我们的网站所做的

在我继续研究的过程中，我也偶然发现了这个（更面向反应的），它说我将把函数/方法从父对象传递给子对象

它的推广方式是否与第一个链接中提到的相同？另外，这是在reactjs中实现这一点的方法吗（就像处理事件的第一个链接）？我应该在这方面的某个地方实施吗

后续问题。。。或者我应该单独问这个问题

如果我有

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

---

如何以反应的方式进行此操作？

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

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

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

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

对于第二个问题，您只需要将所选子组件的索引（或某些其他ID）存储在父组件的

状态中。然后，在父级的
render
方法中（我假设子组件也被渲染），使用该信息将
.selected
类添加到适当的子组件中。因此，父对象知道选择了哪个子对象，并负责正确渲染它们

另一种方法是，您可以使用通过
道具从父对象传递给子对象的单击处理程序函数，根据子事件（例如，单击子对象时设置选择）更新父对象的
状态

希望这有帮助
 您提到的文章使用事件冒泡。它附加一个事件处理程序，并允许所有事件向上冒泡。这是一个非常好的方法，实际上是React内部的行为。似乎只有在执行
操作时才将事件处理程序直接附加到元素，但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>
    );
  }
});

var Child=React.createClass({
渲染：函数（）{
return
{this.props.text}
；
}
});
var Parent=React.createClass({
getInitialState:函数（）{
可变项目=[
{文本：'一'}，
{text:'Two'}，
{文本：'三'}
];
所选变量=项目[0]；
返回{
项目:项目,，
已选：已选
};
},
handleClick：功能（项目）{
this.setState（{selected:item}）；
},
渲染：函数（）{
var self=这个；
返回(

{this.state.items.map（函数（项））{
返回(
);
})}

);
}
});

这里有一个工作JSBin:
Hrmn。事实上，我正在尝试一种由家长处理所有这些内容的方法，但我被难倒了，因为我只是注意到当它们是不同类型的
ChildComponent
时，我们需要做其他特定的事情。但是我应该已经把它们分开，还是应该用
if
条件轰炸父母？我不确定w/c是否更有效，因为这是我第一次创建一个重JS站点。如何对所选项目进行制表？reactjs中有没有一种方法可以记录他们的ID？或者我只是分配它们？另外，如果我传递了一个函数，也许我可以加上第一个问题来插值。
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>
    );
  }
});