为什么这个函数中有这些括号 setFormData({ ...formData, [e.target.name]: e.target.value});?
Why these brackets in this function setFormData({ ...formData, [e.target.name]: e.target.value});?
我的 onChange
处理程序用于提交具有多个输入值的表单,并接受给定输入字段的任何名称属性。所以我基本上知道这段代码做了什么,但我不知道幕后到底发生了什么。
为什么 [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 : ... 用于获取数组或对象的所有属性(当然还有值)
const arr = ["a", "b","c"];
const arr2 = [...arr, "d"];
// arr2 -> ["a", "b","c", "d"]
backets 用于将变量值作为 属性
const prop = "myProp";
const obj = {[prop] : "value"}
// obj -> {myProp : value}
我的 onChange
处理程序用于提交具有多个输入值的表单,并接受给定输入字段的任何名称属性。所以我基本上知道这段代码做了什么,但我不知道幕后到底发生了什么。
为什么 [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 : ... 用于获取数组或对象的所有属性(当然还有值)
const arr = ["a", "b","c"]; const arr2 = [...arr, "d"]; // arr2 -> ["a", "b","c", "d"]
backets 用于将变量值作为 属性
const prop = "myProp"; const obj = {[prop] : "value"} // obj -> {myProp : value}