Reactjs 将object类型的表单html元素关联到react中的状态objet

我有两个表单元素，它们在同一个数组下

<div className="form-group">
            <input
              className="form-control"
              type="text"
              name="user[username]"
              value={this.state.user.username}
              onChange={this.onChange}
              placeholder="Customer Name"
            />
          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="text"
              name="user[mobilenumber]"
              value={this.state.user.mobilenumber}
              onChange={this.onChange}
              placeholder="Customer mbole no."
            />
          </div>

但是在更改用户[username]和用户[mobilenumber]表单中的值时，输入的值不会填充到状态对象user中。而它适用于其他两个状态变量“cloth”和“description”。它们具有简单的名称属性，如“clothname”

和onChange方法

onChange(event) {
this.setState({ [event.target.name]: event.target.value });
}

---

React仅在dom能够检测到更改时更新dom

this.state.user

是一个对象。当您更改

this.state.user

的属性时，它的引用不会更改，因此react认为用户对象没有被修改，也不会更新DOM

解决方案是完全更新对象

onChange(e) {
    let state = {..this.state};
    state[e.target.name] = e.target.value;
    this.setState(state);
}

// I prefer this one
onUserChange(e) {
    let user = {...this.state.user};
    user[e.target.name] = e.target.value;
    this.setState({ user });
}

---

你能发布

onChange

methodupdated onChange方法吗。我必须从html元素中给出name=user[username]和user[mobilenumber]，并使它们像username和mobilenumber一样简单。还将这些元素与不同的方法关联起来。让我试试。我希望能有任何方法来更改html元素的“name”属性，以便相同的onChange（）能够容纳它。@piyesh kumar您的建议奏效了。您仍然可以想出任何方法来操纵html元素的“name”属性，以便在相同的onChange方法中适应更改。

onChange(e) {
    let state = {..this.state};
    state[e.target.name] = e.target.value;
    this.setState(state);
}

// I prefer this one
onUserChange(e) {
    let user = {...this.state.user};
    user[e.target.name] = e.target.value;
    this.setState({ user });
}