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:""
                }

那么我是否对每个属性都具有create函数，并按上面提到的方式分别绑定每个人？还是有其他我不知道的其他反应方式？

谢谢！

Answer 1

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

回答我认为您的意思：

使用输入字段时，方法是为每个字段创建一个事件处理函数。

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

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'));
});

Answer 2

您可以使用curried函数并使用方括号符号来设置详细信息的不同属性：

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

然后您可以在render() ed元素中像这样使用它：

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

Answer 3

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

如何设置状态多个状态？

3 个答案: