Javascript 反应不'；t使用e.target.getAttribute（）方法获取自定义属性

我正在尝试在changeHandler中处理自定义属性。遗憾的是，React无法识别自定义“数据索引”属性

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

我做错了什么

我的输入字段：

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

更新：

我发现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

---

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

您可以通过

e.target.dataset

访问它们。但我建议你们用更多的反应方式

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

---

如果将

data index=“0”

更改为

data index=“5”

，会发生什么情况。这样行吗？只是好奇。我有多个输入，数据索引的值不同。我还将数据索引更改为数据索引或仅更改为数据。什么都不管用..所以

5

或者任何不是falsy的东西也不管用？只是确定一下。对，也不行：）你有一个代码沙盒可以玩。。。这是一个有趣的问题，但我真的想知道为什么

getAttribute

失败：）（但这是正确的答案）有趣，但为什么所有其他属性（如名称、标签等）都有效，而只有数据索引无效？例如e.target.getAttribute（'name'）；get是name属性值。这取决于您的需要，通过这种方式，您可以保持代码的风格。

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

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