Проверка семантической UI-реакции формы с Yup - PullRequest
Новая
       9

Проверка семантической UI-реакции формы с Yup

0 голосов
/ 12 июня 2018

Я прочитал это решение , но это на самом деле не отвечает на вопрос.Я использую Formik и Semantic-UI-реагировать.Можно ли использовать Yup с semantic-ui-реагировать?Если да, может ли кто-нибудь привести пример?

1 Ответ

0 голосов
/ 05 апреля 2019

да, это возможно, вот один из способов сделать это.вставьте этот код в codeandbox.io и установите зависимости, такие как formik yup и semantic-ui-реакции 

import React from "react";
import { render } from "react-dom";
import { Formik, Field } from "formik";
import * as yup from "yup";
import { Button, Checkbox, Form } from "semantic-ui-react";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <>
    <Formik
      initialValues={{
        firstname: "",
        lastname: ""
      }}
      onSubmit={values => {
        alert(JSON.stringify(values));
      }}
      validationSchema={yup.object().shape({
        firstname: yup.string().required("This field is required"),
        lastname: yup.string().required()
      })}
      render={({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit
      }) => {
        return (
          <Form>
            <Form.Field>
              <label>First Name</label>
              <input
                placeholder="First Name"
                name="firstname"
                onChange={handleChange}
                onBlur={handleBlur}
              />
            </Form.Field>
            {touched.firstname && errors.firstname && (
              <div> {errors.firstname}</div>
            )}
            <Form.Field>
              <label>Last Name</label>
              <input
                placeholder="Last Name"
                name="lastname"
                onChange={handleChange}
                onBlur={handleBlur}
              />
            </Form.Field>
            {touched.lastname && errors.lastname && (
              <div> {errors.lastname}</div>
            )}
            <Form.Field>
              <Checkbox label="I agree to the Terms and Conditions" />
            </Form.Field>
            <Button type="submit" onClick={handleSubmit}>
              Submit
            </Button>
          </Form>
        );
      }}
    />
  </>
);

render(<App />, document.getElementById("root"));
...