blocks|key|4170579|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4170580|e.currentTarget.id|code-block|syntax|javascript|4170581|而不是|4170582|e.target.id|4170583|.currentTarget将以实际包含事件侦听器的元素为目标。在您的场景中，.target是包含文本的p标记，它在您的状态中没有要设置的id。|4170584|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Use 

<pre><code>e.currentTarget.id
</code></pre>

instead of

<pre><code>e.target.id
</code></pre>

.currentTarget will target the element that actually contains the event listener. In your scenario, .target is the p tag with the text in it, which doesn't have an id to set in your state.

blocks|key|4170633|text|您可以通过id以及data-*属性来完成此操作。但首选的方法是通过data-*属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4170634|请考虑您的解决方案的this+JSFiddle链接。|4170635|您应该在要从中提取数据的元素上设置ref，然后可以使用它来设置状态中的数据。在代码中，如果用onClick={this.barById}替换onClick={this.bar}，那么代码将从id中提取数据，而在前一种情况下，它将从data-*属性中提取数据。|4170636|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/yw6db9ts/41/^0|5|2|9|6|X|6|0|A|D|0|0|1A|M|1Y|I|2N|2|37|6|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|H|3|I|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

You can do it by <code>id</code> as well as <code>data-*</code> attributes. But the preferred method is by <code>data-*</code> attributes. 

Please consider <a href="https://jsfiddle.net/yw6db9ts/41/" rel="nofollow noreferrer">this JSFiddle</a> link of your solution.

You should set ref on the element from which you want to extract the data and then you can use it to set data in state. IN code if you replace <code>onClick={this.bar}</code> with <code>onClick={this.barById}</code> then code will extract data from <code>id</code> while in former case it will extract data from <code>data-*</code> attributes.

blocks|key|4170092|text|无法选择id属性的原因是，当前e.target是<div>的子级，即。以下是一个有效的建议解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4170093|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"))|code-block|syntax|javascript|4170094|您也可以通过将单击处理程序添加到元素来解决此问题：|4170095|++<div+>
++++<p+id="foo"+onClick={this.bar}>{this.state.value}
++</div>|4170096|使用e.currentTarget.id将很快解决您的问题，只需知道currentTarget代表什么，而不仅仅是Target。祝好运!|4170097|entityMap^0|4|2|F|8|O|5|Y|3|0|0|G|3|0|0|2|I|Y|D|1L|6|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|R|$]]

the reason why you are unable to select the <code>id</code> property is that the current <code>e.target</code> is the child of the <code>&lt;div&gt;</code>, which is <code>&lt;p&gt;</code>. Here is a proposed solution that works: 

<pre><code>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 (
 &lt;div id="foo" onClick={this.bar}&gt;
 {this.state.value}
 &lt;/div&gt;
 );
 }
}

ReactDOM.render(&lt;GettingAttributes /&gt;, document.querySelector("#app"))
</code></pre>

You may also solve this by adding the click handler to the <code>&lt;p&gt;</code> element: 

<pre><code> &lt;div &gt;
 &lt;p id="foo" onClick={this.bar}&gt;{this.state.value}&lt;/p&gt;
 &lt;/div&gt;
</code></pre>

Using <code>e.currentTarget.id</code> will quickly solve your problem, just know what the <code>currentTarget</code> stands for instead of <code>Target</code> alone. Good luck!

So I'm trying to retrieve data in a div attribute in react. JSFiddle shows the problems I'm having. this.state.value is set to an empty string after the event fires. 

I started off using the data-* attribute for the div after reading <a href="https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute">another stack overflow post</a>, but I cannot use jQuery, so I switched to id. Any ideas?

<a href="https://jsfiddle.net/boloneyshinobi/yw6db9ts/1/" rel="nofollow noreferrer">JSFiddle</a>

<pre><code>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 (
 &lt;div id="foo" onClick={this.bar}&gt;
 &lt;p&gt;{this.state.value}&lt;/p&gt;
 &lt;/div&gt;
 );
 }
}
</code></pre>

Getting ID from div in React.js

jQuery

因此，我尝试在react的div属性中检索数据。JSFiddle显示了我遇到的问题。事件激发后，this.state.value被设置为空字符串。在读取之后，我开始使用div的data-*属性，但我不能使用jQuery，所以我切换到id。有什么想法吗？class GettingAttributes extends Re...

问从React.js中的div获取ID
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从React.js中的div获取IDEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从React.js中的div获取ID
EN