为什么我不能使用 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