javascript - 用 [] react 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 的作用是设置一个关于事件名称和值的状态，该状态与所有输入和文本区域不同，以避免使用 handleChange 函数.

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

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

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

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

感谢您的帮助!

Answer 1

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

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

const {name, value} = event.target

DOM 节点中的 name 属性与状态中定义的键匹配 现在我的 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