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

React: Unable to access child props in parent's event handler

本文关键字：程序 事件处理 访问 反应      更新时间：2023-09-26

我正在使用 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>)
  }
});
我希望子项

上的单击事件触发父项的处理程序，以便父项可以根据子项中单击的内容更新其状态。虽然我上面的代码有效，并且调用了父组件的处理程序，但我无法访问子组件的任何 props。我不确定这是否是设计使然，我应该以不同的方式将数据从孩子传递给父母，或者我是否做错了什么。我对 React 还很陌生，所以任何建议都值得赞赏。谢谢！

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

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

编辑

为什么要传递空值？

要记住的事情：组件挂载时，会自动将方法绑定到"this"。

有两个条件

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

当我们直接传递函数（例如 this.clickHandler ） 到子组件，而不必担心实际调用函数时 'this' 的值。

然后 React 用自己的函数替换标准 Function.prototype.bind 方法，以帮助阻止你做任何愚蠢的事情（比如尝试更改 'this' 的已绑定值），所以你必须传递 'null' 说"我知道这只会改变参数"。

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

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

约束规则

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

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

this.props.funcName.bind(null, "args")
取自"this"，

传递"this"作为第一个参数，例如

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

你可以这样做：

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

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

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

这似乎确实有效 - 我有兴趣看到其他解决方案以及哪一个是"最好的"以及为什么。

相关文章：