使用扩散算子简化代码

是的,你可以:

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

注意四周的方括号 [name] 是的。这是因为在原始代码中使用了动态属性名-这是在文本中使用的方式。

你可以在一行中使用 Object.assign 也:

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

其效果与:

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