React 中重复表单的表单数据绑定答案

【问题标题】：Form data binding with repeated forms in ReactReact 中重复表单的表单数据绑定
【发布时间】：2020-11-03 03:15:31
【问题描述】：

父组件

我有一个父组件Users，其 sn-p 如下：

addUser(index, user) {
    var users = this.state.users
    var existingUser = users[index]
    if (existingUser !== undefined) {
        this.updateUser(index, user)
    } else {
        users.push(user)
        this.setState({
            users : users
        })
    }
}

updateUser(index, itemAttributes) {
    this.setState({
        travellers: [
            ...this.state.users.slice(0,index),
            Object.assign({}, this.state.users[index], itemAttributes),
            ...this.state.users.slice(index+1)
        ]
    });
}

updateUser 功能取自 React: Updating state when state is an array of objects

在 JSX 中，我有以下 sn-p：

...
<Form onSubmit={this._handleFormSubmit.bind(this)}>
  <UserDetails index={0} callback = {this.addUser.bind(this)}/>
  <UserDetails index={1} callback = {this.addUser.bind(this)}/>
  <input type="submit" className="btn btn-primary mb-4" value="Continue"/>
</Form>
...

子组件

然后在子组件UserDetails我有：

handleChange(event) {
    event.preventDefault();
    let formValues = this.state.formValues;
    let name = event.target.name;
    let value = event.target.value;

    formValues[name] = value;

    this.setState({formValues})
    this.props.callback(this.props.index, this.state.formValues)
}

在 JSX 中：

<div className="row">
    <div className="col-md-4">
        <FormGroup>
            <Label>First Name</Label>
            <Input type="text" name="firstName" placeholder="First Name" value={this.state.formValues["firstName"]} onChange={this.handleChange.bind(this)} />
        </FormGroup>
    </div>
    <div className="col-md-4">
        <FormGroup>
            <Label>Last Name</Label>
            <Input type="text" name="lastName" placeholder="Last Name" value={this.state.formValues["lastName"]} onChange={this.handleChange.bind(this)} />
        </FormGroup>
    </div>
</div>

现在我可以看到两个表单，每个表单都有一个First Name 和一个Last Name 字段。现在的问题是当我为第一个用户输入First Name 时，第二个用户的First Name 也自动设置为第一个用户的First Name。因此，我无法为这两个用户输入单独的名称。我该如何解决这个问题？

【问题讨论】：

我看到您正在使用let formValues = this.state.formValues; 和formValues[name] = value; 直接改变状态，缓解此问题的一种方法是在分配let formValues = {...this.state.formValues}; 之前传播formValues，或者您可以使用Immer。
谢谢@dOshu。使用扩展运算符解决了我的问题。如果您将评论添加为答案，我会接受。再次感谢！

标签： reactjs data-binding next.js

【解决方案1】：

我看到你正在使用直接改变状态

let formValues = this.state.formValues; 
formValues[name] = value;

缓解此问题的一种方法是在分配之前传播 formValues

let formValues = {...this.state.formValues};

或者你可以使用Immer

【讨论】：