Как добавить кнопку «Очистить» в текстовое поле Formik - PullRequest
Новая
       23

Как добавить кнопку «Очистить» в текстовое поле Formik

0 голосов
/ 15 мая 2019

Я хочу добавить кнопку «Очистить» для удобства пользователей: 

constructor(props) {
    this.emailInput = React.createRef();
}

<Field label="Email" name="email" ref={this.emailInput} onChange={onChange} component={TextField}/>

Но получите это:

Warning: Function components cannot be given refs. Attempts to access this ref will fail.

Ответы [ 3 ]

2 голосов
/ 15 мая 2019

Для сброса определенных полей используйте setFieldValue для установки значения в пустую строку.

setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void

Установите значение поляимперативно.field должен соответствовать ключу values, который вы хотите обновить.Полезно для создания пользовательских обработчиков изменений ввода.

- Документация Formik

Например: 

<Formik 
  initialValues={initialValues}
  ...
>
    {({ setFieldValue }) =>
        ...
        <button type="reset" onClick={() => setFieldValue('fieldName', '')}>
            Reset This
        </button>
        ...

Комусбросьте все поля, используйте resetForm.

resetForm: (nextValues?: Values) => void

Обязательно сбросьте форму.Это очистит errors и touched, установит isSubmitting на false, isValidating на false и повторно запустит mapPropsToValues с реквизитами текущего WrappedComponent или с тем, что передано в качестве аргумента.

- Документация Formik

Например: 

<Formik 
  initialValues={initialValues}
  ...
>
    {({ resetForm }) =>
        ...
        <button type="reset" onClick={resetForm}>
            Reset All
        </button>
        ...

Codesandbox: https://codesandbox.io/s/7122xmovnq

1 голос
/ 15 мая 2019

Formik имеет встроенный метод resetForm , к которому можно получить доступ, как и к другим методам formik.В вашей форме у вас, вероятно, есть что-то вроде 

<Formik 
  initialValues={something}
  validationSchem={someSchema}
  render={() => {
    ...some form stuff
    }
  }

/>

, вы можете получить доступ к реквизитам formik внутри этого метода рендеринга и делать с ними что хотите: 

<Formik 
  initialValues={something}
  validationSchem={someSchema}
  render={(props) => {
    ...some form stuff
    <button type="button" onClick={() => props.resetForm()}>reset form</button>
    }
  }

/>
1 голос
/ 15 мая 2019

вы можете попытаться установить кнопку сброса в вашей форме, например, 

<form>
 <Field label="Email" name="email" onChange={onChange} component={TextField}/>
 <input type="reset" value="Reset">
</form>

Я взял пример здесь , он должен сбросить все входы в форме

...