我可以在 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 接受两种类型的孩子：反应节点返回 React 节点的函数目前您正在将一个 React 节点传递给 Formik (#1)。为了访问values，您需要将子项更改为一个函数（#2），该函数称为渲染道具。然后可以像这样访问值：<Formik&nbsp;&nbsp; initialValues={/* ... */}&nbsp;&nbsp; onSubmit={/* ... */}>&nbsp; {props => (&nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; {/* here we can access props.values */}&nbsp; &nbsp; </form>&nbsp; )}</Formik>props可以在此处找到包含内容的完整列表。

Answer 2

<Formik>可以提供一个子函数，允许您访问它的所有道具，包括当前values-<Formik>&nbsp; {{ values } => (&nbsp; &nbsp; <Form>&nbsp; &nbsp; &nbsp; <label htmlFor={`price${props.id}`}>Price</label>&nbsp; &nbsp; &nbsp; <Field&nbsp; &nbsp; &nbsp; &nbsp; name={`price${props.id}`}&nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <ErrorMessage name={`price${props.id}`} />&nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; // will show the current value, or you can do calculations&nbsp; &nbsp; &nbsp; &nbsp; {values[`price${props.id}`]}&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </Form>&nbsp; )}</Formik>