admin管理员组文章数量:1313006
does anybody know how to retrieve the "key" value from a select when the function onChange is triggered?
callback(e) {
e.target.value;
}
...
<select onChange={this.callback.bind(this)}>
<option key={obj.id}>{obj.name}</option>
<option key={obj.id}>{obj.name}</option>
</select>
I know I can get the value of obj.name with target.value but I can't find out how to retreive the key.
does anybody know how to retrieve the "key" value from a select when the function onChange is triggered?
callback(e) {
e.target.value;
}
...
<select onChange={this.callback.bind(this)}>
<option key={obj.id}>{obj.name}</option>
<option key={obj.id}>{obj.name}</option>
</select>
I know I can get the value of obj.name with target.value but I can't find out how to retreive the key.
Share Improve this question asked Jul 28, 2016 at 2:08 G. M.G. M. 1,90514 silver badges12 bronze badges 3- why would you want the key? that for React to keep track of the order, if you need obj.id, just pass in id={obj.id} and access it that way – omarjmh Commented Jul 28, 2016 at 2:12
- I thought about passing the id. I'd do something like callback.bind(this, obj.id) . Problem is I generate the option tags with an array.map and I can't access directly obj.id – G. M. Commented Jul 28, 2016 at 2:52
- 1 Also I'd like to know why people are downvoting this question, since so far none but Danny managed to find an answer and even that one isn't that trivial... – G. M. Commented Jul 28, 2016 at 11:18
5 Answers
Reset to default 2You could set the id to a data attribute, then access it from e.target. A modified version of your example:
callback(e) {
for (let node of e.target.children) {
if (node.value === e.target.value) {
console.log(node.getAttribute('data-id');
return;
}
}
}
...
<select onChange={this.callback.bind(this)}>
<option key={obj1.id} data-id={obj1.id} value={obj1.value}>{obj1.name}</option>
<option key={obj2.id} data-id={obj2.id} value={obj2.value}>{obj2.name}</option>
</select>
Edit:
Modified above example to fix issue, since e.target actually refers to the select element, not the option element. You need to find the selected option then get its data-id attribute. Working example:
https://jsfiddle/69z2wepo/50706/
callback(e) {
e.target.value; // Changed value
e.target.selectedIndex; // Index of the change value
}
I know this question is older than my children, but a mix of the two answers above: since you're likely generating the <option> elements via props, you could use the select element's selectedIndex value, then index into your props to get the object used to generate the option in the first place.
function DropDown({ current, options, onChange }) {
return (
<select value={current} onChange={(event) => {
const { selectedIndex } = event.target;
onChange(options[selectedIndex]);
}}>
{options.map(({ value, key }) => (<option key={key}>{value}</option>))}
</select>
);
}
<DropDown
current={'ABC'}
options={[
{ value: 'ABC', key: 'key:abc' },
{ value: 'IJK', key: 'key:ijk' },
{ value: 'XYZ', key: 'key:xyz' },
]}
onChange={(obj) => {
console.log('Changed to object', { obj });
}}
/>
I don't know about reactjs, but retrieving the selected value in javascript is:
element.options[element.selectedIndex].value
So maybe try:
element.options[element.selectedIndex].key
Where element is your actual select.
The best way to get the key and label in the onChange event of select in React is:
console.log('Label
本文标签：
javascriptReacts select onChange get keyStack Overflow
版权声明：本文标题：javascript - Reacts select onChange get key - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：http://www.betaflare.com/web/1741888485a2403164.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论