处理动态创建的<select>上的事件下拉选项
处理动态创建的<select>上的事件下拉选项
提问于 2019-07-17 03:13:02
假设我有一个返回dropdown的函数。此函数从某些父级调用，其中父级传入包含状态键、数组和onChange的参数。下拉列表是从数组中的项动态创建的。我想要发生的是，当下拉列表中的一个选项被选中时，传递到state键中的父项被更新为所选内容的值。目前，我正在尝试通过设置onClick处理程序per来完成此操作，但这并不起作用。取而代之的是，我要么没有得到任何值，要么得到了未定义的值(下面将详细描述)。
示例流程：
- Parent传入aStateKey (实际状态键)、用作下拉值的数组和用于更新aStateKey
- 的onChange函数。下拉菜单是从传入的数组中创建的
- 下拉项为selected
- 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>
);控制台显示：
更新字段:未定义，值:未定义。
更改名称:未定义更改的值:未定义
我怎样才能达到我想要的行为？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-17 03:20:46
更新#1
在handleClick内部，您可以使用event.name和event.value来获取所需的目标值。
请改用event.target.name和event.target.value
尝试在select元素中使用onChange而不是onClick。
它属于select，而不是option元素。
Stack Overflow用户
发布于 2019-07-17 03:35:17
您在此事件中的目标是选择并使用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>
);
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57064010
复制相关文章
相似问题