我正在尝试对用户输入的值进行一些数学运算
<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>
最佳答案
Formik接受两种类型的孩子:
反应节点
返回React节点的函数
当前,您正在将React节点传递给Formik(#1)。
为了访问values
,您需要将子级更改为函数(#2),称为渲染道具。
然后可以像这样访问值:
<Formik
initialValues={/* ... */}
onSubmit={/* ... */}
>
{props => (
<form>
{/* here we can access props.values */}
</form>
)}
</Formik>
props
包含的完整列表可以是found here。关于javascript - 我可以在onSubmit运行之前访问Formik中的值吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/61085777/