@3rd1t/formal 中文文档教程

Question

@kevinwolf/formal

React Hooks 时代的优雅表单管理原语。

Table of Contents

• Install
• Usage with React
• Usage with React Native
• Reducing boilerplate
• Extended documentation

Install

yarn add @kevinwolf/formal

Usage with React

注意：此样板可以减少。

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

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)
  });

  const handleSubmit = e => {
    e.preventDefault();
    formal.submit();
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input
          type="text"
          id="firstName"
          name="firstName"
          value={formal.values.firstName}
          onChange={e => formal.change("firstName", e.target.value)}
        />
        {formal.errors.firstName && <div>{formal.errors.firstName}</div>}
      </div>

      <div>
        <label htmlFor="lastName">Last Name</label>
        <input
          type="text"
          id="lastName"
          name="lastName"
          value={formal.values.lastName}
          onChange={e => formal.change("lastName", e.target.value)}
        />
        {formal.errors.lastName && <div>{formal.errors.lastName}</div>}
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input
          type="text"
          id="email"
          name="email"
          value={formal.values.email}
          onChange={e => formal.change("email", e.target.value)}
        />
        {formal.errors.email && <div>{formal.errors.email}</div>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

Usage with React Native

import React from "react";
import { View, Text, TextInput, Button } from "react-native";
import * as yup from "yup";
import useFormal from "@kevinwolf/formal";

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 (
    <View>
      <View>
        <Text>First Name</Text>
        <TextInput
          value={formal.values.firstName}
          onChangeText={text => formal.change("firstName", text)}
        />
        {formal.errors.firstName && <Text>{formal.errors.firstName}</Text>}
      </View>

      <View>
        <Text>Last Name</Text>
        <TextInput
          value={formal.values.lastName}
          onChangeText={text => formal.change("lastName", text)}
        />
        {formal.errors.lastName && <Text>{formal.errors.lastName}</Text>}
      </View>

      <View>
        <Text>Email</Text>
        <TextInput
          value={formal.values.email}
          onChangeText={text => formal.change("email", text)}
        />
        {formal.errors.email && <Text>{formal.errors.email}</Text>}
      </View>

      <Button onPress={formal.submit} title="Submit" />
    </View>
  );
}

Reducing boilerplate

为了减少样板文件，您可以安装两个包之一，具体取决于您是在网络上还是在移动设备上。 这样，您将收到一些只需传播到您的输入和按钮的 prop getter。 ✨

• @kevinwolf/formal-web
• @kevinwolf/formal-native

Extended documentation

有关扩展文档、示例和贡献指南，请参阅包含此包的 monorepo。