React Mobx редактировать наблюдаемый массив - PullRequest
Новая
       33

React Mobx редактировать наблюдаемый массив

0 голосов
/ 25 мая 2020

Я изучаю Mobx и пытаюсь создать приложение-форму, которое отображает некоторые поля массива, и вы должны иметь возможность их редактировать.

У меня есть массив @observable myArray, как можно Я редактирую определенное поле этого массива?

Я попытался создать функцию: 

@action setMyArray(id, value) => {
   myArray.map(field => {
      if (field.id === id) {
          field.text = value
      }
   }
}

Когда я использую это как метод обратного вызова для текстового поля, он добавляет только 1 букву к текущему значению поля и не отображает его повторно. текстовое поле.

1 Ответ

0 голосов
/ 31 мая 2020

Прежде всего, вам не нужно хранить данные в массиве. Если вы хотите сохранить все поля формы в одном наблюдаемом поле, вы должны использовать, например, объект или карту, например: 

class SomeStore {
  @observable formData = new Map();

  @action
  setValue = (name, value) => {
    this.formData.set(name, value)
  }
}

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

const onChange = (event) => {
  SomeStore.setValue(event.target.name, event.target.value);
}

return (
  ...
    <input name="firstName" onChange={onChange} value={SomeStore.formData.get('firstName')} />
    <input name="lastName" onChange={onChange} value={SomeStore.formData.get('lastName')} />
  ...
)
...