Реактивный Formik setFieldValue - PullRequest
Новая
       6

Реактивный Formik setFieldValue

0 голосов
/ 29 февраля 2020

Вот упрощенная версия моего кода.

Обратите внимание на setFieldValue_ и this.setFieldValue_ = setFieldValue;

Этот код работает нормально Я могу получить вывод при нажатии кнопки отправки.

Мне действительно интересно, это правильный способ сделать это? Если нет, можете ли вы указать мне правильное направление? И как называется этот метод? (присвоение переменной класса одной функции и использование ее в другой функции) 

class MyComponent extends React.Component {
 setFieldValue_;

someFunction() {
  this.setFieldValue_("name", value);
}

render() {
  return (
  <Formik
      initialValues={{
        something: ""
      }}
      onSubmit={values => console.log(values)}
    >
      {({
        setFieldValue,
      }) => {
        this.setFieldValue_ = setFieldValue;
        <ThirdPartyCustomComponent onChange={this.someFunction} />
      }}
    </Formik>
}

}

1 Ответ

0 голосов
/ 01 марта 2020

Лично я бы сделал так, чтобы onChange просто вызывал formik set field field тут же, а не использовал разные функции. Строго говоря, вы не хотите устанавливать такое значение, потому что каждый повторный рендеринг устанавливает значение заново.

Я бы также рекомендовал просматривать пользовательские входы formik с помощью ловушки useField - https://jaredpalmer.com/formik/docs/api/useField . Это позволит вам написать небольшую оболочку вокруг стороннего компонента и formik. Заметив, что вы использовали компонент, основанный на классах, вы, возможно, захотите сделать небольшое чтение в ловушках реагирования, прежде чем приступить к использованию useField.

Пример документа: 

const MyTextField = ({ label, ...props }) => {
  const [field, meta, helpers] = useField(props);
  return (
    <>
      <label>
        {label}
        <input {...field} {...props} />
      </label>
      {meta.touched && meta.error ? (
        <div className='error'>{meta.error}</div>
      ) : null}
    </>
  );
};
...