Question

我是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>
        )
    }
}

Answer 1

每次进行更改时，都将被编辑的人放在handleChange方法的数组末尾。

只需反转setState中已编辑的和现有的，就可以解决问题。

this.setState({
  persons: [{
      id,
      name: newPersonName,
    }, 
    ...this.state.persons.filter(i => i.id !== id)
    ]
  })
}

您提供的代码中=之后缺少onChange符号，但我想在您的本地代码中还可以。

Answer 2

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

反应数组的对象更改顺序的更改值

2 个答案: