为什么在此函数setFormData{... formData，[e.target.name]：e.target.value};中使用这些括号？

编程问答 2022-06-11

问题描述

我的onChange处理程序用于提交具有多个输入值的表单，并接受给定输入字段的name属性。所以我基本上知道这段代码的作用，但是我不知道到底发生了什么。

为什么[e.target.name]中的括号是
我也知道，在这种情况下，setFormData({ ...formData,name: e.target.value});函数每次都会使用属性名称更改输入字段的值。

const Register = ({ setAlert,register,isAuthenticated }) => {
  const [formData,setFormData] = useState({
    name:"",email:"",password: "",password2: ""
  }); 

  const {name,email,password,password2} = formData;

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

如果有人会知道会很好。

解决方法

  • spread operator：...用于获取数组或对象的所有属性（当然具有值）

    string

  • backets用于将变量值作为属性放置

    const arr = ["a","b","c"];

const arr2 = [...arr,"d"];

// arr2 -> ["a","c","d"]
form-submitformsjavascriptonchangereactjsreactjs