在父组件中反应 HandleClick

Posted 2023-02-22

【中文标题】在父组件中反应 HandleClick

【英文标题】：React HandleClick in the parent component

【发布时间】：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)

【参考方案1】：

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

【讨论】：

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