如何将键值传递到 select 下拉列表的 onchange 处理程序

Question

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

 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}

Answer 1

我认为这是您需要的答案：

示例：

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”选项添加到参数中？

Answer 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
}

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

如何将键值传递到 select 下拉列表的 onchange 处理程序

How to pass a key value into the onchange handler for a select dropdown

javascript

arrays

key

reactjs

react-native