因此,我尝试在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>
);
}
}
发布于 2018-06-21 04:38:02
使用
e.currentTarget.id
而不是
e.target.id
.currentTarget将以实际包含事件侦听器的元素为目标。在您的场景中,.target是包含文本的p标记,它在您的状态中没有要设置的id。
发布于 2018-06-21 04:41:15
您可以通过id
以及data-*
属性来完成此操作。但首选的方法是通过data-*
属性。
请考虑您的解决方案的this JSFiddle链接。
您应该在要从中提取数据的元素上设置ref,然后可以使用它来设置状态中的数据。在代码中,如果用onClick={this.barById}
替换onClick={this.bar}
,那么代码将从id
中提取数据,而在前一种情况下,它将从data-*
属性中提取数据。
发布于 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
。祝好运!
https://stackoverflow.com/questions/50956462
复制相似问题