UnformReact 表单组件

Unform是一个以性能为中心的库，可以帮助您在React中利用不受控制的组件性能和React Hooks创建漂亮的表单。

主要特性

• 语法漂亮


• React Hooks ;


• 性能很好


• 使用非受控组件


• 集成 pickers, dropdowns 等等

示例表单：

Basics

import React from "react";

import { Form, Input } from "@rocketseat/unform";



function App() {

  function handleSubmit(data) {

    console.log(data);



    /**

     * {

     *   email: 'email@example.com',

     *   password: "123456"

     * }

     */

  };



  return (

    <Form onSubmit={handleSubmit}>

      <Input name="email" />

      <Input name="password" type="password" />



      <button type="submit">Sign in</button>

    </Form>

  );

}

Nested fields

import React from "react";

import { Form, Input, Scope } from "@rocketseat/unform";



function App() {

  function handleSubmit(data) {

    console.log(data);



    /**

     * {

     *   name: 'Diego',

     *   address: { street: "Name of street", number: 123 }

     * }

     */

  };



  return (

    <Form onSubmit={handleSubmit}>

      <Input name="name" />



      <Scope path="address">

        <Input name="street" />

        <Input name="number" />

      </Scope>



      <button type="submit">Save</button>

    </Form>

  );

}

Initial data

import React from "react";

import { Form, Input, Scope } from "@rocketseat/unform";



function App() {

  const initialData = {

    name: 'John Doe',

    address: {

      street: 'Sample Avenue',

    },

  }



  function handleSubmit(data) {};



  return (

    <Form onSubmit={handleSubmit} initialData={initialData}>

      <Input name="name" />



      <Scope path="address">

        <Input name="street" />

        <Input name="number" />

      </Scope>



      <button type="submit">Save</button>

    </Form>

  );

}

Validation

import React from "react";

import { Form, Input } from "@rocketseat/unform";

import * as Yup from 'yup';



const schema = Yup.object().shape({

  email: Yup.string()

    .email('Custom invalid email message')

    .required('Custom required message'),

  password: Yup.string().min(4).required(),

})



function App() {

  function handleSubmit(data) {};



  return (

    <Form schema={schema} onSubmit={handleSubmit}>

      <Input name="email" />

      <Input name="password" type="password" />



      <button type="submit">Save</button>

    </Form>

  );

}

Manipulate data

import React, { useState } from "react";

import { Form, Input } from "@rocketseat/unform";

import * as Yup from 'yup';



const schema = Yup.object().shape({

  name: Yup.string().required(),

  email: Yup.string().email().required(),

  password: Yup.string().when('$updatePassword', {

    is: true,

    then: Yup.string().min(4).required(),

    otherwise: Yup.string().strip(true)

  }),

})



function App() {

  const [updatePassword, setUpdatePassword] = useState(false);



  const initialData = {

    name: 'John Doe',

    email: 'johndoe@example.com',

  }



  function handleSubmit(data) {};



  return (

    <Form

      schema={schema}

      initialData={initialData}

      context={{ updatePassword }}

      onSubmit={handleSubmit}

    >

      <Input name="name" />

      <Input name="email" />



      <input

        type="checkbox"

        name="Update Password"

        checked={updatePassword}

        onChange={e => setUpdatePassword(e.target.checked)}

      />



      <Input name="password" type="password" />



      <button type="submit">Save</button>

    </Form>

  );

}