从React.js中的div获取ID
从React.js中的div获取ID
提问于 2018-06-21 04:22:30
因此，我尝试在react的div属性中检索数据。JSFiddle显示了我遇到的问题。事件激发后，this.state.value被设置为空字符串。
在读取another stack overflow post之后，我开始使用div的data-*属性，但我不能使用jQuery，所以我切换到id。有什么想法吗？
class GettingAttributes extends React.Component {
constructor(props) {
super(props)
this.state = {value: 'Hello!'};
this.bar = this.bar.bind(this);
}
bar(e){
this.setState({value: e.target.id})
}
render() {
return (
<div id="foo" onClick={this.bar}>
<p>{this.state.value}</p>
</div>
);
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-21 04:38:02
使用
e.currentTarget.id而不是
e.target.id.currentTarget将以实际包含事件侦听器的元素为目标。在您的场景中，.target是包含文本的p标记，它在您的状态中没有要设置的id。
Stack Overflow用户
发布于 2018-06-21 04:41:15
您可以通过id以及data-*属性来完成此操作。但首选的方法是通过data-*属性。
请考虑您的解决方案的this JSFiddle链接。
您应该在要从中提取数据的元素上设置ref，然后可以使用它来设置状态中的数据。在代码中，如果用onClick={this.barById}替换onClick={this.bar}，那么代码将从id中提取数据，而在前一种情况下，它将从data-*属性中提取数据。
Stack Overflow用户
发布于 2018-06-21 04:41:32
无法选择id属性的原因是，当前e.target是<div>的子级，即<p>。以下是一个有效的建议解决方案：
class GettingAttributes extends React.Component {
constructor(props) {
super(props)
this.state = {value: 'Hello!'};
this.bar = this.bar.bind(this);
}
bar(e){
this.setState({value: e.target.id})
}
render() {
return (
<div id="foo" onClick={this.bar}>
{this.state.value}
</div>
);
}
}
ReactDOM.render(<GettingAttributes />, document.querySelector("#app"))您也可以通过将单击处理程序添加到<p>元素来解决此问题：
<div >
<p id="foo" onClick={this.bar}>{this.state.value}</p>
</div>使用e.currentTarget.id将很快解决您的问题，只需知道currentTarget代表什么，而不仅仅是Target。祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50956462
复制相关文章
相似问题