React函数参数中Object destructuring用法相关问题咨询

你代码里用到的是ES6对象解构的嵌套解构特性，作用是在函数参数声明阶段，直接从多层嵌套的对象里提取你需要的属性，省去逐层访问的步骤，对应关系如下：

React的onChange回调默认接收的第一个参数是事件对象event，你写的解构语法和普通的逐层访问写法完全等价：

// 你写的解构写法，等效于下面的逐层取值逻辑
const onChange = ({target: {value}}) => {
  console.log(value)
}

// 等价的无解构写法
const onChange = (event) => {
  const value = event.target.value
  console.log(value)
}

解构规则说明 #

• 第一层的{ target }：表示从入参（也就是event对象）中提取target属性，等价于const target = event.target
• 第二层的target: { value }：这里的target:不是声明变量，只是标记要从target属性对应的对象里，继续提取value属性，等价于const value = event.target.value

注意：你当前代码里写console.log(target)会抛出ReferenceError，因为你只完成了value的提取，target并没有被声明为可用变量，只是解构的路径标记。

常见不同解构写法对比 #

你可以根据自己需要访问的变量，选择不同的解构写法：

• 不需要解构，保留全量事件对象

const onChange = (event) => {
  const value = event.target.value
  // 可访问event、event.target、value
}

• 仅解构第一层target

const onChange = ({ target }) => {
  const value = target.value
  // 可访问target、value，event不可用
}

• 嵌套解构同时保留target和value

const onChange = ({ target, target: { value } }) => {
  // 可同时访问target和value
  console.log(target, value)
}

• 完全嵌套解构仅保留value（你当前的写法）

const onChange = ({ target: { value } }) => {
  // 仅可访问value
  console.log(value)
}

这种嵌套解构不局限于事件参数场景，所有的嵌套JS对象都可以用相同的语法提取属性：

const demoObj = {
  a: {
    b: {
      c: 123
    }
  }
}
// 直接提取深层的c属性
const { a: { b: { c } } } = demoObj
console.log(c) // 输出123

内容的提问来源于stack exchange，提问作者ganesh kaspate