如何在映射每个状态的多个输入时更改状态

时间:2018-06-16 14:45:20

标签: reactjs input mapping state

所以这是我的问题我需要一次更改多个输入 我的代码会返回并更改每个单独的输入,并根据已更改的数字按顺序对它们进行排序

renderDogAndOwners(dogs) {
  if (dogs.length > 0) {
    dogs.sort(Helpers.sortByArmbandNumber);
    return dogs.map((dogInfo, index) => {

    return (
      <li key={index}>
        <span style={{ width: '5%' }}>
          <Input inputProps={{ type: 'text', onBlur: this.handleSave, 
            id: `${dogInfo.ownerDogId}` }}
            statePropName='armbandNumber'
            style={{ width: '40px' }}
            value={this.state.armbandNumberObj
             [dogInfo.ownerDogId].number.toString()}
            onChange={this.handleChange} />
        </span>
      </li>
    );
  });
}
return null;

}

现在,如果其中一个输入发生变化,我就会这样做

 handleSave({ target }) => {
    let value = target.value ? Number(target.value) : '';
    let state = { ...this.state };
    let ownerDogId = target.id;
    let dog = this.dogs.find((dog) => dog.ownerDogId === ownerDogId);
    if (dog.armbandNumber === value) {
      return;
    }

    dog.armbandNumber = value || 1;
    dog.forceNumber = value;
    state.armbandNumberObj[ownerDogId].forced = true;

    if (dog.forceNumber === '') {
      delete dog.forceNumber;
      delete state.armbandNumberObj[ownerDogId].forced;
    }

    this.dogs.sort(Helpers.sortByArmbandNumber);

    this.dogs = this.createArmbandNumbers(this.dogs);
    //I would like to just set state here!!! only once
    this.setState({ state });

    //but I have to do this ):
    this.armbandNumbersSetState(this.dogs);
 }

这是我的问题我不希望每次改变状态都会发生变化我想立刻做到这一切有没有人有任何想法如何做到这一点

armbandNumbersSetState(dogs) {
  let state = {...this.state};
  dogs.forEach((dog) => {
     state.armbandNumberObj[dog.ownerDogId].number = dog.armbandNumber;
     if (dog.forceNumber) { 
        state.armbandNumberObj[dog.ownerDogId].forced = true; 
      }
      this.setState({state});
   });
}

0 个答案:

没有答案