為什么我不能使用 formik 更改此嵌套 object 中的值

Question

我有這樣的架構

const pSchema = object().shape({
  text: object().shape({
    shortName: string().required(),
    longName: string(),
    description: string(),
    welcomeMessage: string()
  }),
  config: object().shape({
    region: string(),
    texts: object().shape({
      done: string(),
      title: string(),
      description: string()
    })
  })
});

如您所見，其中有一些嵌套的 object。

我正在做的是使用formik handleChange來處理輸入表單中的更改。 但是其中一些在深度嵌套時不起作用。例如config.texts.done輸入字段。

由於代碼很多，這里就不展示了

這是codeSandBox https的鏈接：//codesandbox.io/s/formik-example-forked-6msipj?file=/index.js:305-656

Answer 1

您在無法正確更改的每個 Form.Item id 中添加“values.[fieldName]”。

正確的版本應該是這個：

 <Form.Item label="Can't write Title"> <Input id="config.texts.title" value={values.config.texts.title} onChange={handleChange} onBlur={handleBlur} /> </Form.Item> <Form.Item label="Can't write Description"> <Input id="config.texts.description" value={values.config.texts.description} onChange={handleChange} onBlur={handleBlur} /> </Form.Item> <Form.Item wrapperCol={{ sm: { offset: 0 }, md: { offset: 0 }, lg: { offset: 6 } }} > <Space> <Button type="default" htmlType="button" shape="round" onClick={() => console.log(-1)} > Cancel </Button> <Button type="primary" htmlType="submit" shape="round" disabled={.isValid} data-cy="save-button" > Save </Button> </Space> </Form.Item>

通過將 id="values.config.texts.description" 替換為 id="config.texts.description" 一切都應該可以正常工作。

這是一個工作的代碼框： https://codesandbox.io/s/formik-example-forked-uc2hw1