React & Formik: как отправить обратно сообщение об успехе или сбое из обработчика успеха в компонент - PullRequest
Новая
       10

React & Formik: как отправить обратно сообщение об успехе или сбое из обработчика успеха в компонент

0 голосов
/ 01 декабря 2018

Речь идет о formik (реагировать и набирать текст).

Мне удалось заставить работать некоторый код, но я использовал для этого .bind(this).Я действительно думаю, что есть лучший способ сделать что-то, поэтому здесь я должен спросить.

Вот код: 

  public register(values: IRegistrationForm, { setSubmitting, setFieldError }: FormikActions<IRegistrationForm>) {
    axios
      .post(process.env.REACT_APP_API_URL + '/register', values)
      .then(response => {
        this.success(); // fail without the bind(this)
        setSubmitting(false);
      });
  }

  private formik() {
    // I need to bind this to be able to call some methods of my component
    const register = this.register.bind(this);
    return (
        <Formik
          initialValues={{
            email: '',
            password: '',
          }}
          onSubmit={register}
          render= {this.formRender}
          validationSchema={Yup.object().shape({
            email: Yup.string().email().required(),
            password: Yup.string().min(10).required(),
          })}
        />
    );
  }

Если это помогает (не уверен), весь код здесь: https://gist.github.com/Nek-/c4ccb6b76593d71105c29079c48757f0

1 Ответ

0 голосов
/ 01 декабря 2018

Лучше связать ваш обработчик событий, компонентные функции, которые совместно используют контекст класса с ключевым словом this в конструкторе.не в вашей функции рендеринга. 

constructor(props:Readonly<{}>) {
    super(props);
    this.state = {
      success: null,
    };
    //... bind your methods here.
    this.register = this.register.bind(this)
}

или используйте функции жирной стрелки, это автоматически связывает this и избегает привязки в вашем рендере или в конструкторе. 

public register = (values: IRegistrationForm, { setSubmitting, setFieldError }: FormikActions<IRegistrationForm>) => {
 // your function body.
}

private success = () => {
    this.setState({...this.state, success: true});
}

Вы можетеиспользуйте его с вашей функцией fomik или любой другой функцией-обработчиком событий, которая должна иметь общий контекст this.

...