Передать значения в состояние от formik - PullRequest
Новая
       7

Передать значения в состояние от formik

0 голосов
/ 14 февраля 2019

Я использую formik для форм в своем приложении реагирования. 

class myComponent extends Component {
  constructor(props) {
    this.state = {
      inputData: {}
    }
  }

render() {
  return(
    <Formik>{({ errors, handleChange, values }) => (
      console.log(values);
      <Field type="text" name="address" onChange={handleChange} />
   )}
   </Formik>
  )
}
}

Вопрос: как я могу передать значения в состояние?

Ответы [ 3 ]

0 голосов
/ 09 августа 2019

Я думаю, что рекомендуется использовать только состояние Formik, чтобы избежать каких-либо побочных эффектов от сохранения состояния в 2 местах (Formik + состояние компонента).Я также искал, чтобы достичь того, что вы хотели, и нашел следующий компонент - https://github.com/jaredpalmer/formik-effect - который позволит вам украсить функцию handleChange.Однако после прочтения README для этого компонента я решил использовать только состояние Formik и передавать его значения любой функции, для которой требуются значения в этом состоянии.

Чтобы передать значения в функцию, я использовал следующий шаблон: 

class Example extends Component {
    handleValues(values) {
        // Do something with values
    }

    render() {
        return (
            <Formik>
                ({values}) => {<button onClick={() => this.handleValues(values)}>Do something</button>}
            </Formik>
        );
    }
}
0 голосов
/ 26 августа 2019

Если вам не нужны изменения состояния по мере их ввода, я бы сказал, что лучшим вариантом будет использование функции onSubmit для обновления вашего состояния.Это также означает, что он пройдет проверку перед обновлением состояния.Похоже, у вас есть функция проверки по умолчанию, поэтому вы также можете добавить опору validate и использовать ее для вызова вашего валидатора. 

class myComponent extends Component {
  constructor(props) {
    this.state = {
      inputData: {}
    }
  }

  render() {
    return(
      <Formik
        initialValues={values}
        onSubmit={(values) => {
          // Set updated state here
        }}
        render={({
            submitForm
          }) => (
          <form onSubmit={submitForm}>
            <Field type="text" name="address" onChange={handleChange} />
            <button type="submit">Submit</button>
          </form>
        )}
      />
    )
  }
}
0 голосов
/ 14 февраля 2019

Вы можете сделать метод handleChange для вашего компонента класса, как показано ниже: 

class myComponent extends Component {
  constructor(props) {
    this.state = {
      inputData: {}
    }
  }

  handleChange = (event) => {
     this.setState({
       inputData: event.target.value
     });
  }

  render() {
    return(
      <Formik>
      {({ errors, handleChange, values }) => {
          console.log(values);
          return(
            <Field type="text" name="address" onChange={this.handleChange} />
          );
      }}
     </Formik>
    );
  }
}
...