const {name, value} = event.target——这是什么意思[重复]答案

【问题标题】：const {name, value} = event.target -- what does this mean [duplicate]const {name, value} = event.target——这是什么意思[重复]
【发布时间】：2023-04-09 08:37:01
【问题描述】：

handleChange(event) {
    const {name, value} = event.target
    this.setState({
        [name]: value
    })
}

这是一种记录反应组件状态变化的方法。以事件为参数，做某事并改变状态。

【问题讨论】：

搜索 "ES6 destructuring assignment" 和这里（在 SO）[javascript] destructuring。
你可能应该了解所有新的 JavaScript 语法，否则你会发现自己问了很多这样的问题webapplog.com/es6
Syntax: const {} = variableName, can anyone explain or point me into the right direction 和 What is destructuring assignment and its uses? 的可能重复

标签： javascript reactjs ecmascript-6

【解决方案1】：

这个方法叫做解构，用来节省几行。
以下示例将向您展示解构的用法。

let person = {
  name: 'David',
  age: 15,
  job: 'Programmer'
}

const { name, age } = person; // Takes the property/method from the object

console.log(name); // Prints 'David'
console.log(age); // Prints '15'

如果不使用解构，我会这样做：

const name = person.name;
const age = person.age;

这需要更多的行。

您可以阅读有关解构here 的更多信息。

【讨论】：

【解决方案2】：

event.target 表示传递函数的元素，{ name } 这种技术称为破坏它与const name = event.target.name 相同

例如，如果您将 handleChange 传递给某个输入 event.target 是您传递 handleChange 函数的输入

【讨论】：