如何在Formick中使用REACTION数字格式 [英] how to use react number format with formik
本文介绍了如何在Formick中使用REACTION数字格式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的表格如下
const NewProduct = ({}) => {
const validate = (values) => {
const errors = {}
if (!values.title) {
errors.title = 'Required'
}
return errors
}
const formik = useFormik({
initialValues: {
title: '',
price: '',
},
validate,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2))
},
})
return (
<div className="newProductComponent">
<form onSubmit={formik.handleSubmit}>
<label>title</label>
<input
type="text"
id="title"
name="title"
onChange={formik.handleChange}
value={formik.values.title}
/>
{formik.errors.title ? (
<div className="error">{formik.errors.title}</div>
) : null}
<NumberFormat
value={formik.values.price}
thousandSeparator={true}
onValueChange={(values) => {
const { formattedValue, value } = values
}}
/>
</form>
</div>
)
}
如何使表单中数字格式组件与Formik一起使用?
推荐答案
useFormik
-您已经使用的挂钩-返回可用于手动设置值的函数setFieldValue
。
price
,第二个是值。您还必须在<NumberFormat>
上设置属性name="price"
。
const App = () => {
const validate = (values) => {
const errors = {}
if (!values.title) {
errors.title = 'Required'
}
return errors
}
const formik = useFormik({
initialValues: {
title: '',
price: '',
},
validate,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2))
},
})
return (
<div className="newProductComponent">
<form onSubmit={formik.handleSubmit}>
<label>title</label>
<input
type="text"
id="title"
name="title"
onChange={formik.handleChange}
value={formik.values.title}
/>
{formik.errors.title ? (
<div className="error">{formik.errors.title}</div>
) : null}
<br />
<label>Price</label>
<NumberFormat
name="price"
value={formik.values.price}
thousandSeparator={true}
onValueChange={(values) => {
const { value } = values;
formik.setFieldValue('price', value);
}}
/>
<br />
<button type="submit">Submit</button>
</form>
</div>
)
};
这篇关于如何在Formick中使用REACTION数字格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文