@3rd1t/formal-web 中文文档教程

发布于 5年前 浏览 25 项目主页 更新于 3年前

@kevinwolf/formal-web@kevinwolf/formal-web

@kevinwolf/formal-web

@kevinwolf/formal 的 Web 扩展。

Table of Contents

Install

yarn add @kevinwolf/formal-web

Usage

import React from "react";
import useFormal from "@kevinwolf/formal-web";
import * as yup from "yup";

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  email: yup
    .string()
    .email()
    .required()
});

const initialValues = {
  firstName: "Tony",
  lastName: "Stark",
  email: "ironman@avengers.io"
};

export default function App() {
  const formal = useFormal(initialValues, {
    schema,
    onSubmit: values => console.log("Your values are:", values)
  });

  return (
    <form {...formal.getFormProps()}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input {...formal.getFieldProps("firstName")} type="text" />
        {form.errors.firstName && <div>{form.errors.firstName}</div>}
      </div>

      <div>
        <label htmlFor="lastName">Last Name</label>
        <input {...formal.getFieldProps("lastName")} type="text" />
        {form.errors.lastName && <div>{form.errors.lastName}</div>}
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input {...formal.getFieldProps("email")} type="text" />
        {form.errors.email && <div>{form.errors.email}</div>}
      </div>

      <button {...formal.getSubmitButtonProps()} type="submit">
        Submit
      </button>
    </form>
  );
}

Tips

如您所见,由于字段代码的重复,上述代码变得有些冗长,为了抽象出重复的代码,您可以创建一个 Field 组件并将所有这些调用替换为 App. js。

Field.js

import React from "react";

export default function Field({ id, label, error, ...props }) {
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} type="text" {...props} />
      {error && <div>{error}</div>}
    </div>
  );
}

App.js

import React from "react";
import useFormal from "@kevinwolf/formal-web";
import * as yup from "yup";

+import Field from './field'

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  email: yup
    .string()
    .email()
    .required()
});

const initialValues = {
  firstName: "Tony",
  lastName: "Stark",
  email: "ironman@avengers.io"
};

export default function App() {
  const formal = useFormal(initialValues, {
    schema,
    onSubmit: values => console.log("Your values are:", values)
  });

  return (
    <form {...formal.getFormProps()}>
-      <div>
-        <label htmlFor="firstName">First Name</label>
-        <input {...formal.getFieldProps("firstName")} type="text" />
-        {form.errors.firstName && <div>{form.errors.firstName}</div>}
-      </div>
+      <Field label="First Name" {...formal.getFieldProps("firstName")} />

-      <div>
-        <label htmlFor="lastName">Last Name</label>
-        <input {...formal.getFieldProps("lastName")} type="text" />
-        {form.errors.lastName && <div>{form.errors.lastName}</div>}
-      </div>
+      <Field label="Last Name" {...formal.getFieldProps("lastName")} />

-      <div>
-        <label htmlFor="email">Email</label>
-        <input {...formal.getFieldProps("email")} type="text" />
-        {form.errors.email && <div>{form.errors.email}</div>}
-      </div>
+      <Field label="Email" {...formal.getFieldProps("email")} />

      <button {...formal.getSubmitButtonProps()} type="submit">
        Submit
      </button>
    </form>
  );
}

Extended documentation

有关扩展文档、示例和贡献指南,请参阅 包含这个包的 monorepo

@kevinwolf/formal-web@kevinwolf/formal-web

@kevinwolf/formal-web

???? Web extension for @kevinwolf/formal.

Table of Contents

Install

yarn add @kevinwolf/formal-web

Usage

import React from "react";
import useFormal from "@kevinwolf/formal-web";
import * as yup from "yup";

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  email: yup
    .string()
    .email()
    .required()
});

const initialValues = {
  firstName: "Tony",
  lastName: "Stark",
  email: "ironman@avengers.io"
};

export default function App() {
  const formal = useFormal(initialValues, {
    schema,
    onSubmit: values => console.log("Your values are:", values)
  });

  return (
    <form {...formal.getFormProps()}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input {...formal.getFieldProps("firstName")} type="text" />
        {form.errors.firstName && <div>{form.errors.firstName}</div>}
      </div>

      <div>
        <label htmlFor="lastName">Last Name</label>
        <input {...formal.getFieldProps("lastName")} type="text" />
        {form.errors.lastName && <div>{form.errors.lastName}</div>}
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input {...formal.getFieldProps("email")} type="text" />
        {form.errors.email && <div>{form.errors.email}</div>}
      </div>

      <button {...formal.getSubmitButtonProps()} type="submit">
        Submit
      </button>
    </form>
  );
}

Tips

As you can see, the above code became a little verbose due to the repetition of the fields code, in order to abstract that repeated code, you can create a Field component and replace all those calls in App.js.

Field.js

import React from "react";

export default function Field({ id, label, error, ...props }) {
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} type="text" {...props} />
      {error && <div>{error}</div>}
    </div>
  );
}

App.js

import React from "react";
import useFormal from "@kevinwolf/formal-web";
import * as yup from "yup";

+import Field from './field'

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  email: yup
    .string()
    .email()
    .required()
});

const initialValues = {
  firstName: "Tony",
  lastName: "Stark",
  email: "ironman@avengers.io"
};

export default function App() {
  const formal = useFormal(initialValues, {
    schema,
    onSubmit: values => console.log("Your values are:", values)
  });

  return (
    <form {...formal.getFormProps()}>
-      <div>
-        <label htmlFor="firstName">First Name</label>
-        <input {...formal.getFieldProps("firstName")} type="text" />
-        {form.errors.firstName && <div>{form.errors.firstName}</div>}
-      </div>
+      <Field label="First Name" {...formal.getFieldProps("firstName")} />

-      <div>
-        <label htmlFor="lastName">Last Name</label>
-        <input {...formal.getFieldProps("lastName")} type="text" />
-        {form.errors.lastName && <div>{form.errors.lastName}</div>}
-      </div>
+      <Field label="Last Name" {...formal.getFieldProps("lastName")} />

-      <div>
-        <label htmlFor="email">Email</label>
-        <input {...formal.getFieldProps("email")} type="text" />
-        {form.errors.email && <div>{form.errors.email}</div>}
-      </div>
+      <Field label="Email" {...formal.getFieldProps("email")} />

      <button {...formal.getSubmitButtonProps()} type="submit">
        Submit
      </button>
    </form>
  );
}

Extended documentation

For extended documentation, examples and contributing guidelines, please refer to the monorepo containing this package.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文