Как связать текстовое поле со сложным объектом в состоянии в React? - PullRequest
Новая
       61

Как связать текстовое поле со сложным объектом в состоянии в React?

0 голосов
/ 19 марта 2020

Фон

Я создаю надстройку для офиса, используя их стартовый набор на основе React и TypeScript. Я упоминаю об этом, потому что я не могу получить большую поддержку отладки, насколько я могу судить, поэтому я не вижу сообщения об ошибке, которое React выдает в моей текущей ситуации.

Что я пытаюсь

(упрощение приведено ниже. Я могу указать более точно c, если хотите; дайте мне знать.)

У меня есть интерфейс для моего AppState и сложный объект с некоторыми свойствами: 

export interface AppState {
  eventInput: EventInput;
}

export class BookendEventInput {
  public minutesAdjacent: number = 30;
  public subject: string = "";
  public enabled: boolean = false;
  public eventId: string = "";
}

У меня есть один рабочий сценарий, который представляет собой флажок: 

<Checkbox id="enableBookendBefore" checked={this.state.eventInput.enabled} onChange={this.eventInputCheckboxChanged}></Checkbox>

Обновление состояния с помощью функции изменения: 

eventInputCheckboxChanged = () => {
    this.setState((state: AppState) => {
      var newValue = !this.state.eventInput.enabled;
      var input = state.eventInput;

      input.enabled = newValue;

      state.eventInput = input;
    })
  }

Но это не работает для другого сценария.

Проблема

Сейчас я пытаюсь сделать что-то подобное с текстовым полем. У меня есть ввод: 

<input type="text" id="subject" disabled={!this.state.eventInput.enabled} value={this.state.eventInput.subject} onChange={this.subjectChanged} />

И функция изменения: 

  subjectChanged = (e) => {
    var newSubject = e.target.value;

    this.setState((state: AppState)=> {
      var input = state.eventInput;
      input.subject = newSubject;

      state.eventInput = input;
    })

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

Фактическое поведение : весь экран становится пустым / белым, указывая на то, что я получаю ошибку уровня React, которую я считаю (так как я могу ' выполнить F12 и не может видеть отладочный вывод из-за того, что он находится на панели задач в Outlook.)

Вопрос

Как правильно связать текстовое поле с помощью React, привязанного к собственность в объекте в государстве? Возможно ли это сделать или я нарушаю принцип React?

1 Ответ

0 голосов
/ 19 марта 2020

В этом случае вы используете обратный вызов setState, чтобы попытаться изменить состояние. Это либо не стрельба, либо бесконечное количество, я не уверен в этом!

В любом случае, для правильного изменения состояния вам нужно: 

subjectChanged = (e) => {
    var newSubject = e.target.value;
    var input = state.eventInput;

    input.subject = newSubject;

    this.setState({eventInput: input});
});

Это позволит достичь того, что вы ищете.

...