我可以在 onSubmit 为 运行 之前访问 Formik 中的值吗？

Question

我正在尝试对用户输入的值进行一些数学运算

<Form>
    <label htmlFor={`price${props.id}`}>Price</label>
       <Field
          name={`price${props.id}`}
          type="text"
       />
       <ErrorMessage name={`price${props.id}`} />
       <span> </span> //Where I want to display value
      ...

这就是我使用 Formik 的方式。表单简单地嵌套在 Formik 中：

<Formik
          initialValues={{
            [`price${props.id}`]: '',
}}

          onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2))
              setSubmitting(false)
          }, 400)
}}>
    <Form>
     ....
    </Form>
</Formik>

Answer 1

<Formik> 可以提供一个子函数，允许您访问它的所有属性，包括当前的 values -

<Formik>
  {{ values } => (
    <Form>
      <label htmlFor={`price${props.id}`}>Price</label>
      <Field
        name={`price${props.id}`}
        type="text"
      />
      <ErrorMessage name={`price${props.id}`} />
      <span>
        // will show the current value, or you can do calculations
        {values[`price${props.id}`]}
      </span>
    </Form>
  )}
</Formik>

Answer 2

Formik 接受两种类型的 children:

1. React 节点
2. returns一个React节点
的函数

目前您正在将 React 节点传递给 Formik (#1)。

为了访问 values，您需要将 child 更改为函数 (#2)，这被称为渲染道具。

然后可以像这样访问值：

<Formik 
  initialValues={/* ... */} 
  onSubmit={/* ... */}
>
  {props => (
    <form>
      {/* here we can access props.values */}
    </form>
  )}
</Formik>

props 包含的完整列表可以是 found here。