Question

假设我有一个返回下拉菜单的函数。该函数从某个父对象调用，该父对象在其中传递道具，包括状态键，数组和onChange。下拉列表是根据数组中的项目动态创建的。我想发生的是，当选择下拉菜单中的一个选项时，传递给状态键的父项将更新为所选值。目前，我正在尝试通过设置一个onClick处理程序来实现此目的，该方法不起作用。取而代之的是，我遇到了没有值或未定义的值（下文将对此进行介绍）。

示例流程：

父级传入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

尝试在onChange元素中使用onClick代替select。

它属于select而不是option元素。

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

2 个答案: