Javascript 从React.js中的div获取ID

所以我试图在react中检索div属性中的数据。JSFIDLE显示了我遇到的问题。激发事件后，this.state.value被设置为空字符串

在阅读之后，我开始使用div的data-*属性，但是我不能使用jQuery，所以我切换到id。有什么想法吗

类获取属性扩展React.Component{
建造师（道具）{
超级（道具）
this.state={value:'Hello！'}；
this.bar=this.bar.bind（this）；
}
巴（e）{
this.setState（{value:e.target.id}）
}
render（）{
返回(
{this.state.value}

);
}
}

使用

而不是

e.target.id

---

.currentTarget将以实际包含事件侦听器的元素为目标。在您的场景中，.target是带有文本的p标记，在您的状态中没有要设置的id。

您可以通过

id

以及

数据-*

属性来实现。但是首选的方法是通过

数据-*

属性

请考虑解决方案的链接。< /P>

---

您应该在要从中提取数据的元素上设置ref，然后可以使用它将数据设置为状态。如果将

onClick={this.bar}

替换为

onClick={this.barById}，则在代码中

然后，代码将从

id

提取数据，而在前一种情况下，它将从

data-*

属性提取数据。

无法选择

id

属性的原因是当前

e.target

是

的子属性。下面是一个可行的建议解决方案：

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"))

类获取属性扩展React.Component{
建造师（道具）{
超级（道具）
this.state={value:'Hello！'}；
this.bar=this.bar.bind（this）；
}
巴（e）{
this.setState（{value:e.target.id}）
}
render（）{
返回(
{this.state.value}
);
}
}
ReactDOM.render（，document.querySelector（“#app”））

您还可以通过将单击处理程序添加到
元素来解决此问题：

  <div >
    <p id="foo" onClick={this.bar}>{this.state.value}</p>
  </div>


{this.state.value}

使用
e.currentTarget.id
将很快解决您的问题，只需知道
currentTarget
代表什么，而不仅仅是
Target
。祝你好运

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"))

  <div >
    <p id="foo" onClick={this.bar}>{this.state.value}</p>
  </div>