我在
TextField
模式下有一个 select
,其中包含 MenuItem
s。我想在传递TextField
的onChange
活动的同时传递额外的信息。
我想我可能会将这些作为数据属性包含在
MenuItem
中,但到目前为止,我没有找到实际的方法。
function MyComponent({options}) {
const [value, setValue] = useState<string>('');
const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
//read option-id and do stuff with it here
setValue(e.target.value);
};
return (
<TextField select onChange={changeHandler}> value={value}
{
options.map(
(option) =>
<StyledMenuItem key={option.id} value={option.value} data-option-id={option.id}>
{option.value}
</MenuItem>
)
}
</TextField>
);
}
这是我已有代码的超级精简版。我不能将
option.id
放入 MenuItem
的值中,因为它需要是来自 option.value
的字符串。此外,option.value
s 不是唯一的。
我可以编写一个自定义组件来执行此操作,但是能够使用
TextField
真的会简化事情。
e.target
似乎只包含我的TextField
的值和名称,我在活动中没有看到其他有用的信息
您可以将 id 作为值传递,并且由于它对于每个选项都是唯一的,因此如果需要,可以从您作为 prop 获取的数组中获取相应的选项,如下所示:
function MyComponent({ options }) {
const [value, setValue] = useState<string>("");
const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
const id = e.target.value;
const option = options.find((o) => o.id === id);
setValue(option.value);
};
return (
<TextField select onChange={changeHandler} value={value}>
{options.map((option) => (
<StyledMenuItem key={option.id} value={option.id}>
{option.value}
</StyledMenuItem>
))}
</TextField>
);
}