当选择onChange
时,我想获取选项的值和键。
我知道我可以在onChangeOption
函数中使用event.target.value
获得选项的 * 值 * 简单性,但我如何获得key
?
<select onChange={this.onChangeOption} value={country}>
{countryOptions.map((item, key) =>
<option key={key} value={item.value}>
{item.name}
</option>
)}
</select>
8条答案
按热度按时间w9apscun1#
你需要在key中传递值作为一个不同的属性。
来自文档:
Keys作为React的提示,但它们不会传递给组件。如果你需要在组件中使用相同的值,请将其显式传递为具有不同名称的prop:
读取:https://reactjs.org/docs/lists-and-keys.html
pvcm50d12#
传递key作为一个prop显然是有效的,但是更快的方法是将key作为一个自定义属性包含在html中。
vmjh9lq93#
这样做的一个简单方法是:
我放了onClick,但你可以使用任何事件。
z8dt9xmd4#
你可以通过
value
传递任何东西,我想这解决了你的问题。6uxekuva5#
想象一下这样一个组件:
它呈现一个输入列表,并获取一个
data
prop,它是一个集合(Array of Objects):正如您所看到的,
key
没有被访问,而是被传递到一个currying function中,该currying function在内部处理缓存,以防止在重新呈现时“无休止”地创建函数。mkshixfv6#
我是一个初学者,已经和这个问题斗争了好几天了!现在,我很乐意和你分享我的最终答案!
这真的很简单-你所要做的就是声明一个匿名函数!对于你想检测它的键的项目的onClick!
例如
那么你的功能就可以是这样;将显示传入的任何“瓦尔”
我希望我能帮上忙!与一个问题作斗争可能是一个痛苦的屁股!亲切的问候。
vbopmzt17#
所以你确实需要将key作为prop传递给
<option>
,但是因为<select>
是一个原生字段,并且在内部处理更改,所以要将该key值取回来有点困难。让我们一次开始一个问题,将prop传递给option可以像这样 Package option组件并使用index
prop作为新的key prop一样简单。还要注意的是,我们正在创建一个自定义组件 Package 器,以将
index
prop从应用到<option />
本身,因为react不喜欢dom元素上的未知prop。现在,如果我们可以在选项中处理选定的事件,我们就可以完成了,但我们不能这样做。所以我们还需要进行自定义选择:
它有两个props
value
和onChange
。注意,我们拦截了change事件以找到索引(键),并将其作为第二个参数沿着给父元素。这不是很好,但我想不出另一种简单的方法来完成这一点,同时仍然使用原生<select>
元素。请注意,您需要替换
<select>
和<optoin>
的用法以使用这些新类,并在选项上分配index
属性和key
属性。kt06eoxx8#
这对我来说也很有效: