如何设置多个状态（state）？

Question

我有多个属性，每个属性都有自己的状态。如何同时指定多个状态？这是一种方法。

ChangeName(event){
        const details = this.state.details;
        details.first_name = event.target.value;
        this.setState({details: details});
    }

并以此方式绑定它

this.ChangeName = this.ChangeName.bind(this);

所以我有一个具有不同属性的表单

this.state={
        details :{first_name: "",
                last_name:"",
                address:"",
                company:"",
                number:"",
                dob:""
                }

那我是不是需要为每个属性都创建函数并像我上面提到的那样单独绑定它们？或者有其他我不知道的方法，因为我是 React 的新手。

谢谢！

- Saif Khan

---

setState 浅层检查差异，因此您必须克隆整个对象并使用它。此外，请避免改变状态，因为这会防止 React 正确处理事情。 - user6019272

我不明白，所以我必须为每个人单独做吗？ - Saif Khan

是的，您需要为每个输入都编写一个事件处理程序。@DoMiNeLa10 所说的避免突变状态是指您正在从状态中读取 details 对象，然后突变其 first_name 属性。在 React 中，您不应该突变状态。我建议将您的属性提升到顶层状态，然后简单地使用 this.setState({ first_name: event.target.value })。 - Sven Tschui

@charlietfl 能否详细说明一下？ - Sven Tschui

@sventschui 的意思是，你可以为许多输入设置一个处理程序。 - charlietfl

Answer 1

回答您关于更新多个状态属性的问题：您绝对可以这样做。`setState`接受一个包含更新的对象。因此，`setState({ foo: '', bar: '' })`将更新`foo`和`bar`属性。

---

回答我认为您的意思是什么：

处理输入字段的方法是为每个字段创建一个事件处理程序函数。

请参见如何正确处理嵌套状态或顶级状态的两个示例。我建议将字段保留在状态的顶层，否则您将不得不处理

• setState的异步性质
• 深度对象克隆以避免更改状态中的对象

https://codepen.io/sventschui/pen/yxPrjP

class AppWithDetails extends React.Component {
  constructor(props) {
    super(props)
    this.onFirstNameChange = this.onFirstNameChange.bind(this);
    this.onLastNameChange = this.onLastNameChange.bind(this);
    this.state = {
      details: { first_name: '', last_name: '' }
    }
  }

  onFirstNameChange(event) {
    // store value because of react synthetic events
    const value = event.target.value;

    // use callback function in setState because of asynchronous nature of setState
    this.setState(function(state) {
      return { 
        details: Object.assign({}, 
          state.details, {
          first_name: value 
        })
      }
    })
  }

  onLastNameChange(event) {
    // store value because of react synthetic events
    const value = event.target.value;

    // use callback function in setState because of asynchronous nature of setState
    this.setState(function(state) {
      return { 
        details: Object.assign({}, 
          state.details, {
          last_name: value 
        })
      }
    })
  }

  render() {
    return (
      <div>
        State:
        <pre>{JSON.stringify(this.state)}</pre>
        <input type="text" onChange={this.onFirstNameChange} value={this.state.details.first_name} />
        <input type="text" onChange={this.onLastNameChange} value={this.state.details.last_name} />
      </div>
    )
  }
}

class AppWithoutDetails extends React.Component {
  constructor(props) {
    super(props)
    this.onFirstNameChange = this.onFirstNameChange.bind(this);
    this.onLastNameChange = this.onLastNameChange.bind(this);
    this.state = {
      first_name: '',
      last_name: '',
    }
  }

  onFirstNameChange(event) {
    this.setState({ first_name: event.target.value })
  }

  onLastNameChange(event) {
    this.setState({ last_name: event.target.value })
  }

  render() {
    return (
      <div>
        State:
        <pre>{JSON.stringify(this.state)}</pre>
        <input type="text" onChange={this.onFirstNameChange} value={this.state.first_name} />
        <input type="text" onChange={this.onLastNameChange} value={this.state.last_name} />
      </div>
    )
  }
}

document.addEventListener("DOMContentLoaded", function(event) { 
  ReactDOM.render(<AppWithoutDetails />, document.getElementById('withoutdetails'));
  ReactDOM.render(<AppWithDetails />, document.getElementById('withdetails'));
});

- Sven Tschui

Answer 2

你可以使用柯里化函数，并使用括号表示法来设置详情的不同属性：

changeDetail(name) {
    return event => {
      this.setState(({ details }) => ({
        details: { ...details, [name]: event.target.value }
      }));
    };
  }

然后你可以在render()函数中像这样使用它：

  <input
      onChange={this.changeDetail("lastName")}
      value={this.state.details.lastName}
    />

    <input
      onChange={this.changeDetail("address")}
      value={this.state.details.address}
    />

- Jonas Wilms

---

但是你只传递了名称吗？ - Saif Khan

我该如何在其中添加地址？ - Saif Khan

Answer 3

ChangeName(event){
        this.setState({
           details:{ first_name: 'jack', last_name:'high'}
      });
}
render(){
  const {details} = this.state
  console.log(details.first_name)
}

- hosein khan beigi