Как отредактировать форму в мастере и сохранить ее состояние для мастера

Question

Я создаю волшебника в Реакте js. Я уже заполняю данные в форме, используя get api call. Теперь я хочу редактировать данные в форме, которая сохраняет их состояние в потоке приложения.

Answer 1

Redux-Form позволяет вам передавать пользовательские реквизиты в Field, поэтому вы можете использовать это как способ передачи восстановленного значения из вашего API в визуализируемый компонент.

Основываясь на вашем примере ссылки вы можно сделать это:

Измените renderField, чтобы он принимал пользовательский реквизит value (или любое другое имя, которое вы хотите) и передал его во входное значение.

const renderField = ({
  input,
  label,
  type,
  value,
  meta: { touched, error }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} value={input.value ? 
            input.value : value} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

Определите переменную состояния и изменить обработчик:

const [email, setEmail] = useState("");

const handleChange = e => {
    setEmail(e.target.value);
  };

Исходное значение вашего поля (в данном примере 'Email') можно получить из API следующим образом:

 useEffect(() => {
    /* your api call to fetch data */
    fetch(....)
    .then(res => setEmail(res.data));
  }, []);

Затем в вашем поле установите реквизиты и установить обработчик onChange

 <Field
        name="email"
        type="email"
        component={renderField}
        label="Email"
        props={{ value: email }}
        onChange={handleChange}
      />

Вот рабочий пример: https://codesandbox.io/s/redux-form-wizard-example-7v3iy?file= / WizardFormSecondPage. js