我可以在 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 的方式。Form 只是嵌套在 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 接受两种类型的孩子：

1. 反应节点

2. 返回 React 节点的函数

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

为了访问values，您需要将子项更改为一个函数（#2），该函数称为渲染道具。

然后可以像这样访问值：

<Formik 

  initialValues={/* ... */} 

  onSubmit={/* ... */}

>

  {props => (

    <form>

      {/* here we can access props.values */}

    </form>

  )}

</Formik>

props可以在此处找到包含内容的完整列表。

Answer 2

<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>