用 [] 反应 setState

Question

大家，我对我看到的一些语法有疑问。

state = {
    nom : '',
    image : '',
    ingredients : '',
    instructions : ''
}


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

...
<div className="card">
    <form action="" className="admin-form ajouter-recette">
        <input value={this.state.nom} onChange={this.handleChange} type='text' name="nom" placeholder="Nom de la recettte"/> 
        <input value={this.state.image} onChange={this.handleChange} type='text' name="image" placeholder="image"/>
        <textarea value={this.state.ingredients} onChange={this.handleChange} name="ingredients" rows='3' placeholder="liste des ingredients"></textarea>
        <textarea value={this.state.instructions} onChange={this.handleChange} name="instructions" rows='15' placeholder="liste des instructions"></textarea>
    </form>
</div>

基本上， handleChange是为了设置一个状态，关于事件名称和值，这与所有输入和 textarea 不同，以避免使用handleChange函数。

通过解构，我们检索{ name, value } 。

然后设置状态，就是这样完成的

this.setState({ [name]: value })

我不明白为什么需要[ ]来包装 name 属性，因为没有它似乎不起作用。

谢谢你的帮助！

Answer 1

如果您想从变量设置/获取 JavaScript 对象的键，则使用objectName[variableName]语法。

在您共享的示例中，正在获取名称和值

const {name, value} = event.target

来自 DOM 节点的 name 属性与 state 中定义的键匹配 所以现在我的 name 变量中有属性的值。 因此，对于 'nom' 的特定情况， name变量具有值 nom。 所以现在声明

this.setState({[name]: value})

将评估为

this.setState({nom: value})

更多信息请访问

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Answer 2

这些被称为属性访问器。 在您的情况下，字段的名称用作访问器，因此我们添加 [] 来告诉 javascript 您正在使用访问器，如果不是所有值都将分配给您所在州的name属性。

可以在此处找到更多信息： Mozille 文档 - 属性访问器