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

Answer 2

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

更多信息可以在这里找到：Mozille docs - Property accessors

Answer 3

请考虑以下对象：

const example = {
  name: 'noodles',
  age: 12,
}

您可以使用点表示法选择其属性：

console.log(example.name)
// 'noodles'

或使用括号传递属性键：

console.log(example['name'])
// 'noodles'

你不能做：

console.log(example[name])
// name is undefined

除非您当然定义name。

用[]反应setState

3 个答案: