[英]Can I access a value in Formik before onSubmit is run?
我正在尝试对用户输入的值进行一些数学运算
<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>
<Formik>
可以提供一个子 function 允许您访问它的所有道具,包括当前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>
Formik 接受两种类型的孩子:
目前您正在将一个 React 节点传递给 Formik (#1)。
为了访问values
,您需要将孩子更改为 function (#2),这被称为渲染道具。
然后可以像这样访问值:
<Formik
initialValues={/* ... */}
onSubmit={/* ... */}
>
{props => (
<form>
{/* here we can access props.values */}
</form>
)}
</Formik>
可以在此处找到props
包含的完整列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.