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

tez616oj 于 2023-04-22 发布在 TypeScript

关注(0)|答案(1)|浏览(98)

我有一个select模式的TextField，它包含MenuItem s。我想在处理TextField的onChange事件时传递附加信息。
我想我可以将它们作为数据属性包含在MenuItem s中，但到目前为止，我还没有找到实际这样做的方法。

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的值和名称，我在事件中没有看到其他有用的信息。

typescript

来源：https://stackoverflow.com/questions/76074388/read-data-attributes-of-menuitem-in-textfields-onchange-event-handler

1条答案

按热度按时间

sqxo8psd1#

你可以将id作为value传递，如果需要的话，从数组中获取相应的选项作为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>
  );
}

赞(0）回复(0）举报 2023-04-22

我来回答

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

1条答案

相关问题

热门标签

最新问答