Раскрывающийся список и значение не обновляются в Formik + React Form - PullRequest
Новая
       22

Раскрывающийся список и значение не обновляются в Formik + React Form

0 голосов
/ 05 мая 2019

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

  1. Выпадающий товар инициализируется неправильно - я ожидаю, что commodity 2 будет доступен во время загрузки, но он требует commodity 1 RESOVLED initialValue={values.commodity.value} должно быть там в выборе товара.
  2. При смене товара по сравнению с выпадением товара, выпадение завода вообще не обновляется. [ ЕЩЕ В ОЖИДАНИИ ]

Рабочий пример - https://codesandbox.io/s/ql95jvpxq4 (правильное поведение)

Я пытался повторить то же самое с моим Select, но почему-то он не работал. Дайте мне знать, что я здесь делаю неправильно.

Неисправный код - https://codesandbox.io/s/01qno3vmvl

код - 

const formikEnhancer = withFormik({
  mapPropsToValues: props => ({
    commodity: { value: "commodity2", label: "commodity2" },
    plant: { value: "Plant3", label: "Plant3" }
  }),
  handleSubmit: (values, { setSubmitting }) => {
    const payload = {
      ...values,
      commodity: values.commodity.value,
      plant: values.plant.value
    };
    setTimeout(() => {
      alert(JSON.stringify(payload, null, 2));
      setSubmitting(false);
    }, 1000);
  },
  displayName: "MyForm"
});

Форма - 

<form onSubmit={handleSubmit}>
        <div style={{ margin: "1rem 0" }}>
          <label htmlFor="commodity" style={{ display: "block" }}>
            Commodity
          </label>
          <Select
            id="commodity"
            name="commodity"
            value={commodities}
            initialValue={values.commodity}
            onChange={(field, value) => {
              console.log(value);
              setFieldValue("plant", plants[value][0]);
            }}
          />
        </div>
        <div style={{ margin: "1rem 0" }}>
          <label htmlFor="plant" style={{ display: "block" }}>
            Plant
          </label>
          <Select
            id="plant"
            name="plant"
            value={plants[values.commodity.value]}
            onChange={setFieldValue}
          />
        </div>

        <button
          type="button"
          className="outline"
          onClick={handleReset}
          disabled={!dirty || isSubmitting}
        >
          Reset
        </button>
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>

        <DisplayFormikState {...this.props} />
      </form>

К вашему сведению - я новичок в formik, так что, может быть, мне здесь не хватает чего-то очень распространенного.

1 Ответ

1 голос
/ 05 мая 2019

Начальное значение было неправильно настроено. Это должно быть строковое значение вместо объекта. Выбор значения изменялся с использованием состояния и реквизитов родительского компонента.

Вот рабочий вариант https://codesandbox.io/embed/n102qqq0nl

...