如何将键值传递给选择下拉列表的 onchange 处理程序答案

【问题标题】：How to pass a key value into the onchange handler for a select dropdown如何将键值传递给选择下拉列表的 onchange 处理程序
【发布时间】：2021-09-28 04:32:33
【问题描述】：

我正在映射一个数组[key,val] 以动态创建下拉列表。我想从 select onChange 处理程序中传递密钥，以便可以将所选值存储在数组中的正确索引中。如何传递密钥。

 AdditionQueryArray.map((val, key) => {
    <Select
        onChange={this.AdditionalFieldHandleChange(key)}
        isMulti
        options={this.state.fieldOptions}
    />
}

AdditionalFieldHandleChange = (selectedOption,key) => {// saving selected option in array by key here}

【问题讨论】：

标签： javascript arrays reactjs react-native key

【解决方案1】：

我认为这是您需要的答案： React js onClick can't pass value to method

示例：

AdditionQueryArray.map((val, key) => {
    <Select
        onChange={() => this.AdditionalFieldHandleChange(key)}
        isMulti
        options={this.state.fieldOptions}
    />
}

AdditionalFieldHandleChange = (selectedOption,key) => {// saving selected option in array by key here}

也许在参数中添加“val”选项，因为您的函数定义中有两个参数？

【讨论】：

【解决方案2】：

你可以这样做：

AdditionQueryArray.map((val, key) => {
    <Select
        onChange={this.AdditionalFieldHandleChange(key, event)}
        isMulti
        options={this.state.fieldOptions}
    />
}

AdditionalFieldHandleChange = (key, event) => {
const val = event.target.value //this will be the selected value
// saving selected option in array by key here
}

这种方式可用于所有类型的表单字段，无论是输入还是选择。

【讨论】：