javascript - 请在reactjs中解释函数签名的这种语法

Question

我被分配到一个正在进行的 ReactJs 项目。在审查代码时，我遇到了一个函数定义，其签名如下所示:

handleInputs({ target: { name, value } }) {

handleInputs 是一个在文本字段的 onChange 事件上调用的函数。它被称为

onChange={this.handleInputs}

我试图在控制台中输出“target”的值，但它抛出了一个错误。而“name”和“value”的值分别是输入控件的名称和控件中的值。

有人可以解释一下函数签名吗？

Answer 1

这是对象解构赋值语法。我们可以将对象作为参数传递给函数，它将根据指定的函数参数(对象键)解包。在您的情况下，this.handleInputs 这应该是一个具有键 target: { name, value } 的对象。在函数内部，我们可以直接访问键值。您可以通过 mozilla 文档中的以下示例更好地理解语法。另见 link了解更多详情

function whois({displayName, fullName: {firstName: name}}) {
  console.log(displayName + ' is ' + name);
}

var user = { 
  id: 42, 
  displayName: 'jdoe',
  fullName: { 
      firstName: 'John',
      lastName: 'Doe'
  }
};

console.log('userId: ' + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"