我正在使用 Formik 與材料 UI 反應形式。我有兩個欄位，我需要在值變化時對這兩個欄位進行計算，所以我必須得到這兩個欄位的值，
const formik = useFormik({
initialValues: {
quantity: '',
price: '',
total: '',
},
validationSchema: Yup.object({
quantity: Yup.string().max(5).required('Quantity is required'),
price: Yup.string().max(5).required('Price is required'),
}),
onSubmit: values => {
},
})
這是表格
<form onSubmit={formik.handleSubmit}>
<TextField
type="number"
size="small"
error={Boolean(
formik.touched.quantity && formik.errors.quantity,
)}
helperText={
formik.touched.quantity && formik.errors.quantity
}
label="Quantity"
margin="normal"
name="quantity"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.quantity}
variant="outlined"
/>
<TextField
size="small"
error={Boolean(formik.touched.price && formik.errors.price)}
helperText={formik.touched.price && formik.errors.price}
label="Last Name"
margin="normal"
name="price"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.price}
variant="outlined"
/>
{Boolean(
formik.touched.tax_status && formik.errors.tax_status,
) && (
<FormHelperText error>
{formik.errors.tax_status}
</FormHelperText>
)}
<Box sx={{ py: 2 }}>
<Button
color="primary"
disabled={formik.isSubmitting}
fullWidth
size="large"
type="submit"
variant="contained">
Submit
</Button>
</Box>
</form>
如何在每次更改時檢索數量和價格的值？
uj5u.com熱心網友回復：
我沒有使用 formik 所以不確定，也許你可以useEffect在你的上面放一個formik.values然后做任何你想做的事情。
就像是
useEffect(()=>{
//do your stuff
},[formik.vaues])
uj5u.com熱心網友回復：
如果您想在表單上顯示結果，您可以在代碼中添加類似的內容；
<div>{formik.values.price} * {formik.values.quantity}</div>
如果你想做一些驗證，你可以更新你的驗證模式
validationSchema: Yup.object({
quantity: Yup.string().max(5).required('Quantity is required'),
price: Yup.string().max(5)
.required('Price is required')
.when('quantity', (quantity, schema) => (quantity && schema.test(
'limit',
'some message',
value => {
return (value && value quantity > 30) // condition
}
))),
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/405202.html
標籤：
上一篇：將字串值從一個傳遞到另一個？