Реагировать на изменение значения порядка изменения объекта массива - PullRequest
Новая
       24

Реагировать на изменение значения порядка изменения объекта массива

0 голосов
/ 22 февраля 2019

Я новичок в React и пытаюсь выяснить, как изменить состояние моего объекта.Но когда я изменяю состояние в моем поле ввода, поле перерисовывается внизу.

Как сохранить поле ввода в том же месте, в котором оно отображается в первый раз. 

class App extends Component {
    state = {
        persons: [{
            id: 0,
            name: ''
        },{
            id: 1,
            name: ''
        }]
    }
    
    changePersonNameHandler = event => {
        const id = parseInt(event.target.id);
        const newPersonName = event.target.value;

        this.setState({
            persons: [...this.state.persons.filter(i => i.id !== id),
                {
                    id,
                        name: newPersonName,
                }
            ]
        })
    }
    
    render () {
        const {persons} = this.state;
        
        return (
          <div>
            <ul>
              {persons.map((i, index)  => (
                  <li key={i.id}>
                      <label>Name: </label>
                      <input id={i.id}
                           value={i.name}
                           onChange{this.changePersonNameHandler}/>
                  </li>
                  )
              )}
            </ul>
          </div>
        )
    }
}

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

filter удаляет предмет, и вы теряете его позицию.Чтобы изменить элемент и сохранить его место в массиве, используйте map.Также лучше не полагаться на this.state, чтобы получить новое значение для setState.Вы должны использовать setState(oldState => newState) вместо. 

changePersonNameHandler = event => {
    const id = parseInt(event.target.id);
    const newPersonName = event.target.value;

    this.setState(old => {
        const persons = old.persons.map(
            person => person.id !== id ? person : {id, name: newPersonName}
        );
        return {persons};
    })
}
0 голосов
/ 22 февраля 2019

Каждый раз, когда вы вносите изменение, вы помещаете отредактированного человека в конец массива в своем методе handleChange.

Просто инвертируйте отредактированное исуществующих в setState, и это сделает свое дело. 

this.setState({
  persons: [{
      id,
      name: newPersonName,
    }, 
    ...this.state.persons.filter(i => i.id !== id)
    ]
  })
}
  • В коде, который вы дали, = отсутствует после кода onChange, но я полагаю, в вашем локальном кодевсе в порядке.
...