Question

我有一个这样的字段：

   const updatedForm = Object.assign({}, this.state.form)
    updatedForm[name] = value;

有没有办法使用扩展运算符或ES6进一步简化此操作？

Answer 1

是的，您可以：

const updatedForm = { ...this.state.form, [name]: value };

请注意[name]周围的方括号。这是由于在原始代码中使用了动态属性名称-这就是您在文字中使用的方式。

Answer 2

这将与以下内容具有相同的作用：

const updatedForm = {...this.state.form}

updatedForm[name] = value

从某种意义上讲，它更短，并且可以达到相同的目标。

来自@Felix Kling

const updatedForm = {
  ...this.state.form,
  [name]: value
}

因此，您可以在创建新的分布的对象的过程中定义新的键值对。

实际上，我假设使用React。您可以执行以下操作：

class Form extends React.Component{
    state = {
        form: {
            name: "",
            age: ""
        }
    }

    handleOnChange = (e) => {
        const { name, value } = e.target

        const updatedForm = {
            ...this.state.form,
            [name]: value
        }

        this.setState({
            form: updatedForm
        })
    }

    render(){
        const { form } = this.state
        return(
            <div>
                <form>
                    <input name="name" value={form.name} onChange={this.handleOnChange}/>
                    <input name="age" value={form.age} onChange={this.handleOnChange}/>
                </form>
            </div>

        )
    }
}

请参阅沙箱：https://codesandbox.io/s/objective-galois-ifogc

Answer 3

您也可以使用Object.assign在一行中完成此操作：

const updatedForm = Object.assign({}, this.state.form, { [name]: value })

使用Spread运算符简化代码

3 个答案: