反应：无法访问父级事件处理程序中的子道具

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>)
  }
});

我希望子项上的click事件触发父项的处理程序，以便父项可以根据在子项中单击的内容来更新其状态。 虽然上面的代码有效，并且调用了父级的处理程序，但我无法访问子级组件的任何道具。 我不确定这是否是设计使然，是否应该以其他方式将数据从子级传递到父级，或者我做错了什么。 我对React还是很陌生，因此可以提出任何建议。 谢谢！

Answer 1

您不能这样做，但是可以通过回调将数据从子级传递到父级

<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？

要记住的事情：安装组件时会发生自动绑定到“ this”的方法。

有两个条件

1，调用从父组件传递到子组件的回调

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

然后，React用其自己的函数替换标准的Function.prototype.bind方法，以帮助您避免做任何愚蠢的事情（例如尝试更改已绑定的“ this ”值），因此您必须将“ null ”传递给说“我知道这只会改变论点”。

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

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

约束规则

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

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

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

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

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

Answer 2

您可以这样做：

var ListItem = React.createClass({
  clickItem: function (e) {
      this.props.clickHandler(e, this.props.my_data); // now you can pass any data to parent
  },
  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.clickItem}>
            { this.props.my_data.name }
          </a>
          {link_details}
      </li>
    )
  }
});

Answer 3

我看了一下在React.js中将props传递给父组件的答案，并提出了以下内容：

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

这似乎确实有效-我很想看看其他解决方案，哪一个是“最佳”解决方案，以及原因。