Question

我有一个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传递的表单？

Answer 1

您需要在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

Formik现场包装

1 个答案: