Unform React 表单组件

Unform是一个以性能为中心的库，可以帮助您在React中利用不受控制的组件性能和React Hooks创建漂亮的表单。主要特性语法漂亮 React Hooks ; 性能很好 使用非受控组件 集成 pickers, dropdowns 等等示例表单：Basicsimport React from "react";
import { Form, Input } from "@rocketseat/unform";

function App() {
function handleSubmit(data) {
console.log(data);

/**
* {
* email: '[email protected]',
* password: "123456"
* }
*/
};

return (
<Form onSubmit={handleSubmit}>
<Input name="email" />
<Input name="password" type="password" />

<button type="submit">Sign in</button>
</Form>
);
}Nested fieldsimport 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 dataimport 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>
);
}Validationimport 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 dataimport 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: '[email protected]',
}

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