反应：在事件发生时检索动态子键

小编典典

反应：在事件发生时检索动态子键

reactjs

我知道组件的动态子代必须具有唯一性key，如下所示（官方文档的修改示例）：

render: function() {
  var results = this.props.results;
  return (
    {results.map(function(result) {
      return <ChildComponent type="text" key={result.id} changeCallback={this.props.callbackFn}/>;
    })}
  );
}

考虑到这ChildComponent是嵌套在这里的另一个React组件，render方法如下

render: function() {
  var results = this.props.results;
  return (
    <div className="something">
       <input type="text" onChange={this.props.changeCallback} />
    </div>
  );
}

callbackFn(event)调用时有什么方法可以访问密钥？

阅读 179

2020-07-22

共1个答案

小编典典

通过使用JavaScript的native来部分应用函数回调bind。这在React的“
组件之间通信 ”文档中有所提及：

callbackFn: function(key) {
  // key is "result.id"
  this.props.callbackFn(key);
},
render: function() {
  var results = this.props.results;
  return (
    <div>
      {results.map(function(result) {
        return (
          <ChildComponent type="text" key={result.id}
            changeCallback={this.callbackFn.bind(this, result.id)} />
        );
      }, this)}
    </div>
  );
}

2020-07-22