处理动态创建的 <select> 下拉选项的事件

Question

假设我有一个返回下拉列表的函数。该函数从某个父级调用，其中父级传入包括状态键、数组和 onChange 在内的道具。下拉列表是从数组中的项目动态创建的。 What I want to happen is, when an option in the dropdown is selected, the parents passed in state key gets updated to the value of whatever was selected.目前，我正在尝试通过设置一个 onClick 处理程序 per 来做到这一点，但这是行不通的。相反，我遇到了没有或未定义的值（下面将详细描述）。

示例流程：

• Parent 传入 aStateKey（实际状态键）、用作下拉值的数组以及用于更新 aStateKey 的 onChange 函数
• 下拉菜单是根据传入的数组创建的
• 选择了一个下拉项
• aStateKey（作为道具传入）通过传入的 onChange 函数进行更新。

我知道传统的方法是给和 onChange 处理程序，但我在解决如何获得上述期望时遇到了麻烦。

家长

state = { aStateKey: "" };

someArray = ["test", "another test"];

updateField = (name, value) => {
        console.log("Updating field: " + name + " with value: " + value);
    
}

return(
    <div>
        <CreateDropdown name="aStateKey" items={this.someArray} onChange={this.updateField} />
    </div>
);

CreateDropdown

function CreateDropdown(props) {
    const handleClick = event => {
        console.log("changed name:" + event.name + "changed value: " + event.value);
        props.onChange(event.name, event.value);
    };

    return (
        <div>
            <select>
                {props.items.map(field => (
                    <option key={field} value={field} name={props.name} onClick={handleClick}>
                        {field}
                    </option>
                ))}
            </select>
        </div>
    );
}

控制台日志

什么都不显示！但是，如果我将 onClick 从<option> 移动到<select>，即

return (
        <div>
            <select onChange={handleClick}>
                {props.items.map(field => (
                    <option key={field} value={field} name={props.name}>
                        {field}
                    </option>
                ))}
            </select>
        </div>
    );

控制台显示：

更新字段：未定义值：未定义。

更改名称：未定义更改值：未定义

如何实现我想要的行为？

Answer 1

你的目标表单这个事件是选择并使用 onChange 和你需要的更新函数：

function CreateDropdown(props) {

  return (
     <div>
        <select name={props.name} onChange={e => 
          props.onChange(e.target.name, e.target.value);}>
            {props.items.map(field => (
                <option key={field} value={field} 
                    {field}
                </option>
            ))}
        </select>
     </div>
   );
} 

Answer 2

更新 #1

在handleClick 内部，您正在使用event.name 和event.value 来获取您想要的目标值。

改为使用event.target.name 和event.target.value

---

尝试在您的select 元素中使用onChange 而不是onClick。

它属于 select 而不是 option 元素。