React:根据事件检索动态子关键字
React:根据事件检索动态子关键字
提问于 2014-05-04 03:34:48
我知道一个组件的dynamic children必须有一个唯一的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)时访问密钥？
回答 2
Stack Overflow用户
发布于 2014-05-04 03:53:25
使用JavaScript的原生bind部分应用函数回调。React的"Communicate Between Components“文档中提到了这一点：
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>
);
}Stack Overflow用户
发布于 2021-02-16 14:09:19
我们可以使用Data Attributes访问数据
// ChildComponent.js
render: function() {
var results = this.props.results;
return (
<div className="something">
<input
type="text"
onChange={this.props.changeCallback}
data-key={this.props.key} // "key" was passed as props to <ChildComponent .../>
/>
</div>
);
}现在，在您的changeCallback方法中，您可以访问这个data
// ParentComponent.js
(evt) => {
console.log(evt.target.dataset.key);
}祝你好运。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23448937
复制相关文章
相似问题