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？

要记住的事情：自动绑定方法来“这个＆＃39;安装组件时会发生。

有两个条件

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

当我们直接将函数（例如this.clickHandler）传递给子组件而不用担心＆＃39; 这个＆＃39;当实际调用该函数时。

React然后用自己的函数替换标准Function.prototype.bind方法，以帮助阻止您做任何愚蠢的事情（比如尝试更改已经绑定的值＆＃39; this ＆＃39;），所以你必须通过＆＃39; null ＆＃39;说'＃34;我明白这只会改变论点＆＃34;。

2.Calling在同一组件中定义的函数

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

绑定规则

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

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

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

取自＆＃39;这个＆＃39;，传递＆＃39;这个＆＃39;作为第一个论点，例如。

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

我看了Pass props to parent component in React.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>)
  }
});

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

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

3 个答案: