Как установить / обновить выбранный элемент в React.js?

Question

Не могли бы вы рассказать, как установить / обновить выбранный элемент в React.js? Я хочу, чтобы значение щелкающего элемента изменилось на "тест". Как я могу настроить такой обработчик событий для этого?

Вот мой код

При нажатии на элемент я пытаюсь обновить элемент, как это

   btnClick(obj) {
        obj.hse = 'test';
        console.log(obj);
        // this.setState({
        //     data: [obj]
        // });
    }

Answer 1

Так как ваш data объект является массивом, я думаю, что самый простой способ реализовать это, чтобы отправить btnClick() функционировать id элемента, по которому щелкнули, обновите это значение и сохраните новое состояние.

Codepen

Вот так:

this.state.data.map((item, i) => {
  return <li onClick = {
    this.btnClick.bind(this, i)
  > {
     item.hse
  } < /li>;
})

Путем изменения map(item) => { в map(item, i) => { вы используете index параметр метода карты массива. это i переменная затем используется при привязке btnClick функция.

btnClick(id) {
    let temp = this.state.data.slice();
    temp[id].hse = 'test';
    this.setState({
      data: temp
    });
}

Здесь id Индекс предмета, по которому щелкнули Начните с создания мелкой копии this.state.data и положить его в местный temp переменная. Затем измените hse собственностью temp[id], Наконец, обновите data состояние с локальной переменной.

редактировать: исправлена ​​неработающая ссылка