假设我有一个返回dropdown的函数。此函数从某些父级调用,其中父级传入包含状态键、数组和onChange的参数。下拉列表是从数组中的项动态创建的。我想要发生的是,当下拉列表中的一个选项被选中时,传递到state键中的父项被更新为所选内容的值。目前,我正在尝试通过设置onClick处理程序per来完成此操作,但这并不起作用。取而代之的是,我要么没有得到任何值,要么得到了未定义的值(下面将详细描述)。
示例流程:
我理解传统的方法是给与和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>
);
控制台显示:
更新字段:未定义,值:未定义。
更改名称:未定义更改的值:未定义
我怎样才能达到我想要的行为?
发布于 2019-07-17 03:20:46
更新#1
在handleClick
内部,您可以使用event.name
和event.value
来获取所需的目标值。
请改用event.target.name
和event.target.value
尝试在select
元素中使用onChange
而不是onClick
。
它属于select
,而不是option
元素。
发布于 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>
);
}
https://stackoverflow.com/questions/57064010
复制相似问题