我的formik表格是这样的
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
,第二个参数是值。您还必须在 name="price"
上设置属性 <NumberFormat>
。
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>
)
};
您可以使用
useField
和 useFormikContext
设置值
示例:
const [field, meta] = useField('price');
const { setFieldValue } = useFormikContext();
const isError = meta.touched && Boolean(meta.error);
<NumberFormat
value={formik.values.price}
thousandSeparator={true}
onValueChange={(values) => {
const { formattedValue, value } = values
setFieldValue(field.name, formattedValue)
}}
/>
{isError && <div className="error">{meta.error}</div>}
我遇到了同样的问题并这样解决:
function NumberFieldHooks(props) {
const { name } = props;
const [field] = useField(name);
return (
<NumericFormat
{...field}
decimalScale={3}
thousandSeparator={true}
onValueChange={values => {
console.log(values);
const { floatValue } = values;
formik.setFieldValue(field.name, floatValue);
}}
/>
);}
并将其放入我的 Formik 表格中:
<div>
<label>From</label>
<div
style={{
paddingLeft: '70px',
}}
>
<NumberFieldHooks
name="mileageFrom"
type="number"
min="0"
value={formik.values.mileageFrom}
/>
</div>
</div>