这是解构事件目标属性还是某些 JSX 语法？

Question

我在这里找到了一个事件处理函数，用于处理输入字段的 onChange 事件。

我对 [e.target.name] works/what 的表现感到困惑。

（我知道它正在获取目标输入字段的 name 属性值）。

const handleOnChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });

有人可以解释一下它在做什么以及它是如何工作的吗？非常感谢。

Answer 1

[e.target.name]在JS中叫做computed property。

简单来说，[e.target.name]会变成一个对象属性（key），值为e.target.name。例如，如果 e.target.name 对应于（值为）credit，则对象结构将如下所示：

  setFormData({
    ..formData,
    credit: e.target.value

  });

这很简单 JavaScript，更具体地说是语言的 ES6 特性。

关于 React 的 onChange 事件处理程序要牢记的另一件重要事情是它的行为与原生 JS onchange 事件完全不同。阅读 this post 了解更多。

参考资料

Computed Property Names

Is this de-structuring event target attribute or some JSX syntax?