提交后如何获取所有值 - 包括未触及的字段

Question

我需要在 onSubmit 方法中获取所有值，而不仅仅是脏字段。

import React from 'react'
import { Form, Field } from 'react-final-form'

const App: React.FC = () => (
  <Form onSubmit={values => console.log(values)}>
    {({ form: { submit } }) => (
      <>
        <Field name="street" component="input" placeholder="street" />
        <Field name="city" component="input" placeholder="city" />
        <Field name="state" component="input" placeholder="state" />
        <button onClick={submit}>Submit</button>
      </>
    )}
  </Form>
)

export default App

实际结果： {street: "A", city: "B"}

预期结果： {street: "A", city: "B", state: null}

Answer 1

最终形态 treats '' and undefined as more or less equivalent.

您需要提供 initialValues={{ street: null, city: null, state: null }} 才能获得预期结果。但是，如果用户触摸字段，更改值，然后将其更改回空，则 street 键将从表单值中删除（见上文 link）。您可以通过提供 parse={v => v} to cancel the normal ''-to-undefined conversion.

来解决这个问题

希望对您有所帮助？

提交后如何获取所有值 - 包括未触及的字段

How to get all values after submit - not touched fields included

react-final-form