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

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

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

{
设置超时（（）=>{
警报（JSON.stringify（值，null，2））
设置提交（错误）
}, 400)
}}>
....

可以提供一个子函数，允许您访问它的所有道具，包括当前的

值

-

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

{{values}=>(
价格
//将显示当前值，或者您可以进行计算
{values[`price${props.id}`]}
)}

Formik接受两种类型的子项：

反应节点

返回React节点的函数

当前，您正在将React节点传递给Formik（#1）

要访问

值

，需要将子对象更改为函数（#2），该函数称为渲染属性

然后可以像这样访问值：

{props=>(
{/*这里我们可以访问props.values*/}
)}

---

可以是

道具

所包含内容的完整列表。

您可以展示如何使用

或

with formik（）

？您可以从那里访问值。@larz我编辑了我的帖子，以反映我没有使用渲染道具。我只是在Formik内部有一个表单，没有任何类似的渲染。再次编辑文章，以便可视化。谢谢你的帮助，这确实有效！我现在只有提交按钮有问题：

submit

。在进行这些更改之前，它通常会起作用。。。现在它似乎有了默认的行为。在我点击提交按钮后，我意识到路由正在改变。它将更改为我在Formik中传递给输入字段的任何值。e、 g.

/？smallPrice0=122&mediumPrice0=333&bigPrice0=111&bikePrice0=999

要处理表单提交，您可以调用Formik提供的函数。