Javascript 如何获得；“关键”；来自反应元素的支柱（更改时）？

我想在选择

onChange

时获取选项的值和键

我知道我可以在

onChangeOption

函数中使用

event.target.value

获取选项的值，但是如何获取

键

<select onChange={this.onChangeOption} value={country}>
    {countryOptions.map((item, key) =>
        <option key={key} value={item.value}>
            {item.name}
        </option>
    )}
</select>

{countryOptions.map（（项，键）=>
{item.name}
)}

您需要将键中的值作为不同的道具传递

从文档：

键作为一种反应提示，但它们不会传递给组件。如果组件中需要相同的值，请将其作为具有不同名称的道具显式传递：

---

阅读：

因此，您确实需要将密钥作为道具传递到

中，但由于

是一个本机字段，并且在内部处理更改，因此要将该键值返回有点困难。 让我们一次开始一个问题，将道具传递到选项中可能非常简单，就像这样包装选项组件，并使用

索引

道具作为新的关键道具

const CustomOption = ({ value, children, index }) => (
    <option key={index} value={value}>{value}</option>
);

它有两个道具

value

，和

onChange

。请注意，我们拦截更改事件是为了找到索引（键），并将其作为第二个参数传递给父级。这不是很好，但我想不出另一种简单的方法来实现这一点，同时仍然使用本机

元素

---

注意：要使用这些新类，您需要替换

和

的用法，并将

索引

属性与选项上的

键

属性一起分配。

将键作为属性传递显然有效，但更快的方法可能是将键作为自定义属性包含在html中

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onSelect=this.onSelect.bind（this）；
}
onSelect（事件）{
const selectedIndex=event.target.options.selectedIndex；
console.log（event.target.options[selectedIndex].getAttribute（'data-key'）；
}
render（）{
报税表（
一个
两个
);
}
}
ReactDOM.render（，document.getElementById（'root'）
您可以通过
值传递任何内容。我认为这解决了你的问题

<select onChange={this.handleChange}>
        {this.state.countryOptions.map((item, key) =>
          <option key={key} 
            value={JSON.stringify({key, value:item.value})}>
            //passing index along with value
            {item.value}
          </option>
        )}
</select>

handleChange(e) {
    let obj = JSON.parse(e.target.value) 
   // gives object{ key:country index, value: country value}
  }


{this.state.countryOptions.map（（项，键）=>
//将索引与值一起传递
{item.value}
)}
手变（e）{
让obj=JSON.parse（e.target.value）
//给出对象{键：国家索引，值：国家值}
}
想象一下这样一个组件：

<Component data={[{id:'a23fjeZ', name="foo"}, ...]}` 

如您所见，
键未被访问，但被传递到内部处理缓存的中，以防止在重新渲染时“无休止地”创建函数。
一种简单的方法是：

const functionCall = (event) => {
    console.log(event.target.getAttribute('a-key'));
}

<button a-key={1} onClick={functionCall}>Press Me</button>


const functionCall=（事件）=>{
log（event.target.getAttribute（'a-key'）；
}
按我

我放了onClick，但您可以使用任何事件。
这是一个错误的答案。它没有提出解决方案，也没有考虑到他正在处理一个本地
select
字段，因此这可能会以某种形式使用，如果替换为自定义组件，可能会损坏。谢谢回复，我已经阅读了文档，但仍然有一个问题。这是否意味着我“必须”将键中的值作为不同的道具传递，以便获得键？是的，这意味着。感谢您的回答，这正是我需要澄清的问题。您是否愿意为这种情况创建自定义属性？像
数据键
？这很好，我以前没有想到过这种方法。@vsync我认为这是这里的要求。请您进一步解释一下您的评论好吗？
value
prop必须是字符串化对象的值，而不是什么讨厌的东西。这与服务器无关（很可能）。这已经有20多年了。其他人都做对了，但他们的解决方案是以非最佳方式实现的。这里的selectedIndex是什么<代码>事件.目标.选项.选择索引
；
function Component ( props ){
    // cached handler per unique key. A self-invoked function with a "cache" object
    const onChange = (cache => param => {
        if( !cache[param] )
            cache[param] = e => 
                console.log(param, e.target.name, e.target.value)

        return cache[param];
    }
    )({});

    return props.data.map(item =>
        <input key={item.id} name={item.name} onChange={onChange(item.id)} />
    }

}

const functionCall = (event) => {
    console.log(event.target.getAttribute('a-key'));
}

<button a-key={1} onClick={functionCall}>Press Me</button>