javascript - react : Unable to access child props in parent's event handler

Question

我正在使用 React 创建一个 UI，我有一个父组件和一个子组件，大致如下:

// Child component
var ListItem = React.createClass({
  render: function() {
    var link_details = (
      <div>
          Start Date: {this.props.my_data.start_date}<br/>
          End Date: {this.props.my_data.end_date}<br/>
      </div>
    );

    return (
      <li>
          <a onClick={this.props.clickHandler}>
            { this.props.my_data.name }
          </a>
          {link_details}
      </li>
    )
  }
});

// Parent component
var Sidebar = React.createClass({
  getInitialState: function() {
    return {
        my_data: [],
    };
  },
  handleListItemClick: function(e){
    console.log(e.target);
    console.log(e.target.props);  
  },
  render: function() {
    var myLinks = this.state.my_data.map(function(mylink) {
        return (
          <ListItem key={mylink.id} my_data={mylink} clickHandler={this.handleListItemClick} />
        );
    }.bind(this));
    return (
    <div>
      <ul className="nav nav-sidebar">
        { myLinks }
      </ul>
    </div>)
  }
});

我希望子项上的点击事件触发父项的处理程序，以便父项可以根据在子项中单击的内容更新其状态。虽然我上面的代码有效，并且调用了父级的处理程序，但我无法访问子组件的任何 Prop 。我不确定这是否是设计使然，我应该以不同的方式将数据从 child 传递给 parent ，还是我做错了什么。我对 React 还是很陌生，所以非常感谢任何建议。谢谢!

Answer 1

你不能那样做，但你可以通过回调将数据从 child 传递给 parent

<li>
  <a onClick={this.props.clickHandler.bind(null,this.props.my_data.name)}>
    { this.props.my_data.name }
  </a>
  {link_details}
</li>

或者如果你使用的是 es6，则使用箭头函数

<li>
  <a onClick={() => this.props.clickHandler(this.props.my_data.name)}>
    { this.props.my_data.name }
  </a>
  {link_details}
</li>

编辑

为什么传递 null？

要记住的事情:当您的组件安装时，会自动绑定(bind)方法到“this”。

有两个条件

1.调用从父组件传递给子组件的回调

当我们直接将函数(例如 this.clickHandler)传递给 子组件 时，无需担心 'this' 的值函数实际被调用。

React 然后用它自己的函数替换标准的 Function.prototype.bind 方法来帮助阻止你做任何愚蠢的事情(比如试图改变已经绑定(bind)的值 'this ')，所以你必须传递 'null' 来表示“我知道这只会改变参数”。

2.调用同一组件中定义的函数

React 不会对同一组件内的函数调用执行此操作

绑定(bind)规则

如果您想通过在函数上调用 .bind 来设置第一个参数...

通过 props 传入，例如将 null 作为第一个参数传递

this.props.funcName.bind(null, "args")

取自“this”，将“this”作为第一个参数传递，例如

this.funcName.bind(this, "args")