Formik Field Wrapper - PullRequest
Новая
       7

Formik Field Wrapper

1 голос
/ 11 июня 2019

У меня есть форма 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 напрямую?

1 Ответ

0 голосов
/ 20 июня 2019

Вам необходимо вызвать setFieldValue в форме formik, чтобы установить значение поля https://jaredpalmer.com/formik/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean-void в форме Формика, которая будет отправлена. Как только 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
...