[JavaScript知识库]用简单的思路理解React中的stateSet({[name]:value})

这是React官网中一道受控组件的案例题。

我们逐步分析上面的代码：

首先是这个函数

handleForm = (e) => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    }
    )

const{name,value} =e.target, 在es6的对象解析中我们可以知道，对象获取值是根据key的名称来获取相应的value的：（如：const {log} =console，console是js原生对象的一个方法，通俗易懂的来讲就是，console也是一个对象，它里面有一个方法叫做log ，如果用我们理解的的代码 就是

console={log=“在控制台输出....”，A="xxx",B="xxx"}其中A，B是console对象的其他属性和属性值。返回我们的例子，const{log}?=console ，log是一个对象里的属性，我们给它赋值，它就首先会去console这个大对象里找叫“log”的属性 ，也就是我们上面说的。log=“在控制台输出..”，那么我们就可以这样来使用log(“哈哈”), 在控制台是同样的效果

理解了这个 ，应该就知道const{name,value} =e.target这段代码的含义了。

2接下来继续看下面的代码

this.setState({

[name]:value

})

在上面的代码中 我们可以得知，<input>标签的 name=“userName"已经被我们的常量 name拿到（*此处注意两个name不是同一个含义，标签中的name是属性，而我们通过定义一个常量对象拿到了标签中name属性的值。也就是userName）这时候触发了onChange事件状态发生变化，<input>标签中的value已经发送改变，我们必须通过setState来更改 原来state的值，也就是最开始定义的 state={userName:""}，这就是我们为什么要定义标签的name要和最初的state中的属性名称保持一致的原因(有点绕 多读几遍)。

上面的代码也可以写成这样，其实下面这种更好理解，e.target.name 正好对应着state中的那个属性名，所以“恰好” 我刚开始理解明白的时候就是 正好名字对上 所以才可以修改成功。（多读几遍就可以理解 恰好的意思了，也正因为恰好所有才可以修改成当前状态的value！）

this.setState({

[e.target.name]:e.target.value

})