@3rd1t/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
???? 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.