在 TextField 的 onChange 事件处理程序中读取 MenuItem 的数据属性

问题描述 投票:0回答:1

我在

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
的值和名称,我在活动中没有看到其他有用的信息

reactjs typescript material-ui
1个回答
0
投票

您可以将 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>
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.