React 无法使用 e.target.getAttribute() 方法获取自定义属性

Question

我正在尝试在我的changeHandler 中处理自定义属性。不幸的是，React 无法识别自定义的“data-index”属性。

识别所有其他标准属性（例如名称、标签等）。

我做错了什么？

我的输入栏：

  <Input
    name="test"
    label="test 1"
    data-index="0"
    value={values.test}
    onChange={handleInput}
  />

我的changeHandler（此处数据索引始终为空）：

  const handleInput = (e: any) => {
    const { value } = e.target;
    const dataIndex = e.target.getAttribute('data-index');
    setValues({
       ...
    });
  };

更新：

我发现 e.target.attributes 输出以下内容。

NamedNodeMap {0: aria-invalid, 1: id, 2: name, 3: type, 4: class, 5: value, aria-invalid: aria-invalid, id: id, name: name, type: type, class: class, …}
0: aria-invalid
1: id
2: name
3: type
4: class
5: value
length: 6

我的数据索引属性根本无法识别。为什么？

Answer 1

您可以通过

e.target.dataset

访问它们。但我建议你采用更多类似 React 的方式。

<Input
    value={values.test}
    onChange={() => handleInput({ name, label, index: 0 })}
/>

const handleInput = ({ name, label, index }) => {
    setValues({
       ...
    });
};

Answer 2

如果您使用 React + Typescript，则可以对目标元素进行类型转换，然后在其上使用 getAttribute 属性。

const handleInput: : ChangeEventHandler<HTMLInputElement> = (e) => {
    const dataIndex = (e.target as HTMLInputElement).getAttribute('data-index');
};