Как обновить форму, используя внутреннее состояние и избыточность при использовании той же формы в обновлении - PullRequest
Новая
       13

Как обновить форму, используя внутреннее состояние и избыточность при использовании той же формы в обновлении

0 голосов
/ 28 марта 2019

В приложении реакции есть 3 поля в форме.

  1. Раскрывающийся список со значениями, чай и кофе (при выборе поля Чай / Кофе поля 2 и 3 должны быть видны)
  2. Имя чая / кофе
  3. Кол-во чая / кофе

Я устанавливаю состояние с помощью setState, которое должно идентифицировать выбранный чай или кофе.

Пока публикуется, работает нормально.Но я использую ту же форму для обновления.

Только поле 1 будет загружено с фактическим значением.но поле 2 и поле 3 не загружаются со значением и не считывают никаких значений. 

...
<Form onSubmit={this.props.hanleSubmit(this.onSubmit)}>
  <Field name="drink" type="select" onChange={(e) => {
   if (e.target.value === 'T') {
     this.setState({isTea: true})
   } else {
     this.setState({isTea: false})
   }
  }}component={renderField}>
    <option value="" disabled>select any</option>
    <option value="T">Tea</option>
    <option value="C">Coffee</option>
  </Field>
  {
    this.state.isTea && ...Field for Tea name and Field for Tea Qty...
  }
  {
    !this.state.isTea && ...Field for coffee name & field for coffee qty...
  }
</Form>

И для обновления в componentDidUpdate

, если данные имеют этот формат 

   data = {
     drink: 'T',
     teaName: 'Green tea',
     coffeeName: null,
     teaQty: '4',
     coffeeQTy: null
  }

  ComponentDidUpdate(prevProps, prevState) {
    ...
    if (data) {
      if (data.drink === 'T') {
        this.setState({isTea: true});
      } else {
        this.setState({isTea: false});
      }

      this.props.change('drink', data.drink);

      if (data.drink === 'T') {
         this.props.change('teaName', data.teaName);
         this.props.change('teaQty', data.teaQty);
      } else {
         this.props.change('coffeeName', data.coffeeName);
         this.props.change('coffeeQty', data.coffeeQty);  
      }
    }
   ...
  }

Мне нужно, чтобы данные были загружены правильно для полей 2 и 3. И это должно работать правильно для изменения значения.

1 Ответ

0 голосов
/ 28 марта 2019

Вместо setState вручную лучше использовать https://redux -form.com / 8.1.0 / examples / selectionformvalues ​​/ .

Следование примеру кода должно позволить вамотображать поля на основе других полей, сохраняя конфигурацию формы при редактировании.

...