Проверка формы реакции: отключение кнопки отправки при возникновении ошибок с помощью formik - PullRequest
Новая
       81

Проверка формы реакции: отключение кнопки отправки при возникновении ошибок с помощью formik

0 голосов
/ 19 июня 2020

Я хочу сначала отключить кнопку отправки, когда поля ввода пусты или есть какие-либо ошибки, и включить ее, если не все это, используя formik и yup, я пробовал с грязным и isValid, но он не работает, он остается отключенным, даже когда есть ошибок нет, вот мой компонент: 

const validationSchema = Yup.object().shape({
 phone: Yup.string()
.required("Required Field")
.min(10, "Must be a 10 Characters Long")
.max(10, "Must be a 10 Characters Long"),

passwordClient: Yup.string()
.min(8, "Minimum 8 Characters")
.required("Required Field"),
});

class Signin extends Component {
 constructor(props) {
 super(props);
 this.state = {
  phone: "",
  passwordClient: "",
  clients: [],
};
}

handleSubmit = (values) => {
Services.createClient({
  phone: this.state.phone,
  passwordClient: this.state.passwordClient,
})
  .then(console.log(this.state))
  .catch(console.log(this.state));
 };

 handleChange = (event) => {
 this.setState({ [event.target.name]: event.target.value });
 };

 render() {
 let { phone, passwordClient } = this.state;
  return (
  <div className="wrapper justify-content-center">
    <div className="form-wrapper">
      <h1>
        <b>
          <i>Create an Account</i>
        </b>
      </h1>
      <Formik
        initialValues={{
          phone,
          passwordClient,
        }}
        validationSchema={validationSchema}
        onSubmit={this.handleSubmit}
        validate={this.validate}
        enableReinitialize={true}
        validateOnBlur={true}
        validateOnChange={true}
      >
        {({ values, errors, touched, handleBlur, isValid, dirty }) => (
          <form>
            <div className="col-md-12 ">
              <input
                type="text"
                placeholder="Enter Phone Number"
                name="phone"
                onChange={this.handleChange}
                onBlur={handleBlur}
                value={this.state.phone}
                className={touched.phone && errors.phone ? "error" : null}
              />
              <Errors touched={touched.phone} message={errors.phone} />
            </div>

            <div className="col-md-12 ">
              <input
                type="password"
                placeholder="Enter password"
                name="passwordClient"
                onChange={this.handleChange}
                onBlur={handleBlur}
                value={this.state.passwordClient}
                className={
                  touched.passwordClient && errors.passwordClient
                    ? "error"
                    : null
                }
              />
              <Errors
                touched={touched.passwordClient}
                message={errors.passwordClient}
              />
            </div>
            <div className="createAccount">
              <button
                type="button"
                onClick={this.handleSubmit}
                disabled={!(isValid && dirty)}
              >
                Signin
              </button>
              <small>
                Does not have an account ? <Link to="/signup">Sign up</Link>
              </small>
            </div>
          </form>
        )}
      </Formik>
    </div>
  </div>
  );
  }
  }
 export default Signin;

вы знаете, как это решить?

...