Unform 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Unform 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开发厂商
地区 不详
提 交 者 红薯
适用人群 未知
收录时间 2019-05-14

软件简介

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>
  );
}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表于云计算专区
10/01 02:30

群晖+DOCKER,一个更好的DEVOPS+WEBOS云平台及综合云OS选型

本文关键字:dualrunning os bootloader设想,dockerized os subsystem appmodel,云devops学编程 经过前面对于群晖的讨论,我们知道它是一个从bootloader到os都很有特色的系统,我们重点讨论了黑群晖的bootloade...

0
0
发表了博客
2019/07/24 23:18

OpenGL入门1.3:着色器 GLSL

前言 经过之前一段时间的学习(渲染管线简介)我们已经知道了着色器(Shader)是运行在GPU上的程序,这些小程序为图形渲染管线的某个特定部分而运行,着色器只是一种把输入转化为输出的程序,着色器也是一种非常独立的程序,因为它们之间不能相互通信,它们之间唯一的沟通只有通过输入和输出 之前我们简要地触及了一点着色...

0
0
发表了博客
2012/03/02 15:40

oracle 安装

Oracle 11g r2 64位centos5.7*64安装手册 版本:1.0 作者:容 易 准备系统 安装操作系统 1)准备Centos5.7安装盘,设置系统从光驱启动,进入安装界面 选择安装类型,这里直接按enter选默认的图形模式安装 2)如果确定光盘没有问题跳过光盘检测 3)选择安装语言 4)选择键盘类型 4)由于我是全新安装,所有硬盘中的数据全部...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
10 收藏
分享
返回顶部
顶部