Как реализовать переключатели в ReactJS с помощью Formik - PullRequest
Новая
       77

Как реализовать переключатели в ReactJS с помощью Formik

0 голосов
/ 30 января 2020

В моей регистрационной форме мои радиокнопки не работают, когда я нажимаю кнопку создания, ничего не происходит, она не активирует функцию onSubmit, но если я удаляю их, она активируется.

Вот мой код: 

import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";

const male = props => (
  <input type="radio" value="male" name="gender" {...props} />
);

const female = props => (
  <input type="radio" value="female" name="gender" {...props} />
);

export class RegisterPage extends React.Component {
  render() {
    let { initialValues } = this.state;
    return (
      <div>
        <div>
          <h1>Sign Up</h1>
          <Formik
            initialValues={initialValues}
            onSubmit={(
              { email, password, gender },
              { setStatus, setSubmitting }
            ) => {
              setStatus();
              authenticationservice.newuser({ email, password, gender }).then(
                user => {
                  const { from } = this.props.location.state || { from: { pathname: "/" }      `};`
                  this.props.history.push(from);
                },
                error => {
                  setSubmitting(false);
                  setStatus(error);
                }
              );
            }}
            render={({ errors, status, touched, isSubmitting }) => (
              <Form>
                <div>
                  <label htmlFor="email">Email Address</label>
                  <Field name="email" type="text" />
                  <ErrorMessage name="email" component="div" />
                </div>
                <div>
                  <label htmlFor="gender">Gender</label>
                  <label>Male</label>
                  <Field name="gender" as={male} />
                  <label>Female</label>
                  <Field name="gender" as={female} />
                </div>
                <div>
                  <button type="submit" disabled={isSubmitting}>
                    Create
                  </button>
                  {isSubmitting && <img alt="" src="data:image" />}
                </div>
                {status && <div>{status}</div>}
              </Form>
            )}
          />
        </div>
      </div>
    );
  }
}

Я не уверен, что происходит, потому что я не получаю никаких кодов ошибок, просто ничего не происходит

...