在父组件中反应 HandleClick答案

【问题标题】：React HandleClick in the parent component在父组件中反应 HandleClick
【发布时间】：2016-08-14 08:23:51
【问题描述】：

阅读 React 教程和文档，找不到关于子组件 <a onClick="{function(){ this.props.handleClick... 但在父组件中声明的操作的任何信息。

我们应该什么时候做？为什么不只在子组件中做所有事情？我们有 Redux、Flux，但人们每天都在做，为什么？

（父组件示例）

var SongList = React.createClass({
  logTrack: function(track) {
    console.log(track)
  }

  render: function () {
    var trackNodes = this.props.data.map(function(track, i) {
      return (
        <Song
          key={i} 
          handleClick={(val) => this.logTrack(val)} // pass function through props
         >
          {track}
        </Song>
      );
    });

    return (
      <div className="row">
        {trackNodes}
      </div>
    );
  }
})

var Song = React.createClass({
  render: function () {
    <a onClick={ function () { this.props.handleClick('some value') }>
      {this.props.children}
    </a>
  }
})

【问题讨论】：

handleClick={(val) => this.logTrack(val)}

标签： reactjs react-native flux

【解决方案1】：

这里没有具体的行动，它归结为分离关注点和在您的应用中什么是有意义的。通常，子组件/哑组件不知道如何处理单击的内容。这是一份更适合父母的工作。例如，如果您有一个项目列表（父项），则列表项（子项）通常只想通知父项它们被点击。父项是管理列表状态的对象，因此父项可能希望将附加项标记为已选（多选），或者它可能希望取消选择先前的选择并将新项标记为已选（单选）。让子组件了解所有对等组件以实现这一点是不合理的。

【讨论】：

Redux 和 Flux 为 SAY 父组件创建的子组件被点击，对与否？