在Formik + React Form

Question

以下是我的代码面临的问题-

1. 商品下拉菜单初始化不正确-我期望commodity 2在加载时可用，但花费commodity 1 已重新整理 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的新手，所以我可能缺少这里很常见的东西。

Answer 1

initialValue设置错误。它应该是字符串值而不是对象。 选择值正在使用父组件的状态和道具进行更改。

这里是有效的变体https://codesandbox.io/embed/n102qqq0nl