Question

我正在上一堂课。我有一个受控窗体和一个handleInput方法来反映输入中的任何更改。但是，我不明白为什么他在handleInput方法中写了[name]而不是name。详细的解释将不胜感激。

 handleInput(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

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

表单结构：

<Form>
    <FormGroup>
        <Label htmlFor="firstname" md={2}>First Name</Label>
        <Input type="text" id="firstname" name="firstname" 
                                value={this.state.firstname} 
                                onChange={this.handleInput} />

    </FormGroup>
    <FormGroup>
        <Label htmlFor="lastname" md={2}>Last Name</Label>
        <Input type="text" id="lastname" name="lastname" 
                                value={this.state.lastname} 
                                onChange={this.handleInput} />
    </FormGroup>
</Form>

Answer 1

此语法适用于computed property name

它是一个新的ES6功能，可以计算对象的属性名称。

在此之前，您必须直接在对象上指定属性。

var data = {};
data[name] = value;

this.setState(data);

使用新语法，您可以内联对象定义。

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

Answer 2

在表单中，输入元素具有名称。在handleInput函数中，当您这样做

const name = target.name;

此名称已分配给name

现在，在做

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

名称被评估为firstname或lastname。

您可以了解有关此功能的更多信息here

Answer 3

这是ES6的功能，方括号允许您以编程方式引用对象的属性。

Answer 4

将状态键声明为name: value会引用实际上名为name的对象键。而是使用[name]引用从输入（value）获得的名称const name = target.name;，后者将依次引用状态中的相应键。

Answer 5

handleInput(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        // let name now = "blocker" and value = "something"
        this.setState({
            [name]: value
        })
    }

在console.log(this.state) output will be上

{blocker:something}

现在，如果您从名称中删除[]，则

this.setState({
        name: value
    })

然后在console.log(this.state)上输出将是

{name:something}

多个状态更改

5 个答案: