我有一个Formik表单,我试图在其中渲染Formik字段。但是,该字段是货币字段,并且触发了onBlur
,我想清除字段格式。我正在尝试将Formik字段包装在TextField周围。为此,在Form.js
中,我有:
<Form>
<Field
component={ MoneyField }
name='cover'
variant='outlined'
label='Cover'
fullWidth
InputProps={{ startAdornment: <InputAdornment position='start'>$</InputAdornment> }} />
<Button
type='submit'
variant='contained'
color='primary'
fullWidth>
Submit
</Button>
然后我的自定义资金字段部分MoneyField.js
:
const MoneyField = ({ field, form, ...props }) =>{
const { name, value } = field
function formatInputToMoney(e) {
let cover = e.target.value.match(/\d+\.?/g)
cover = cover === null ? 0 : parseFloat(cover.join(''))
form.values[name] = formatMoney(cover).replace('$', '')
}
return (
<TextField
onBlur={ formatInputToMoney }
{ ...props } />
)
}
export default MoneyField
以上方法有效,并且当用户更改输入时,表单中的值将更新。但是,如果我没有form.values[name]
行来调用表单以直接更新其值,则该值将在输入框中而不是在表单对象中得到更新,因此,如果将值更改为5在输入字段中,我会看到该更改,但是在提交表单时,初始值0将被传递。
是否存在一种更有效的方法来创建Field的子组件,在该子组件中,表单值将基于子组件进行更新,而无需直接调用Formik传递的表单?
答案 0 :(得分:0)
您需要在formik表单上调用setFieldValue
才能设置字段值
https://jaredpalmer.com/formik/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean-void以Formik的形式提交。一旦formik更新了表单模型,它将导致您的组件重新呈现,并向您显示更新的值。
const MoneyField = ({ field, form, ...props }) =>{
const { name, value } = field
function formatInputToMoney(e) {
let cover = e.target.value.match(/\d+\.?/g)
cover = cover === null ? 0 : parseFloat(cover.join(''))
form.setFieldValue(name, formatMoney(cover).replace('$', ''));
}
return (
<TextField
onBlur={ formatInputToMoney }
{ ...props } />
)
}
export default MoneyField