[英]Getting ID from div in React.js
所以我正在尝试在div属性中检索数据。 JSFiddle显示了我遇到的问题。 事件触发后,this.state.value设置为空字符串。
在阅读了另一个堆栈溢出文章之后 ,我开始使用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>
);
}
}
采用
e.currentTarget.id
代替
e.target.id
.currentTarget将定位实际包含事件侦听器的元素。 在您的方案中,.target是带有文本的p标记,在您的状态中没有要设置的ID。
您可以通过id
以及data-*
属性来实现。 但是首选方法是使用data-*
属性。
请考虑您解决方案的这个JSFiddle链接。
您应该在要从中提取数据的元素上设置ref,然后可以使用它来将数据设置为state。 在代码中,如果你更换onClick={this.bar}
用onClick={this.barById}
然后将代码从数据提取id
,而在前者的情况下它将从数据中提取data-*
属性。
之所以无法选择id
属性,是因为当前的e.target
是<div>
的子e.target
,该子元素是<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
。 祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.