超级大柱子
超级大柱子

优雅地提高 React 的表单页面的开发效率

Den Form

为什么叫 Den Form ? 可能是因为 丹凤眼 非常迷人吧...

一个非常轻巧的 Form 实现, gzip 体积只有 3kb, 可以很方便跨越组件层级获取表单对象, 或者管理联动更新

安装

$ yarn add react-den-form

基础使用

Form 组件会在有 field 属性的子组件上注入 onChange 事件, 并获取其中的值

field 属性是 Form 组件用于标记哪一类子组件需要被监管的字段, 并且也是用于校验更新的 key

field 可以重复, 但是如果两个子组件拥有相同的 field 值, 那么当此类 field 需要更新时, 两个子组件都会进行更新

import React from "react";
import Form from "react-den-form";

export default () => {
  return (
    

      
 console.log(data)}>
        
      

    

  );
};

当我们输入数据后, 按回车键, onSubmit 方法打印如下:

{userName: "333"}

主动传入的 onChange 事件不会受到影响

Form 组件会在有 field 属性的子组件上注入 onChange 事件, 并获取其中的值

import React from "react";
import Form from "react-den-form";

export default () => {
  return (
    

      
 console.log(data)} onError>
         console.log("self-onChange")} field="userName" />
      

    

  );
};

当我们输入数据时, onChange 方法打印如下:

self-onChange
{userName: "333"}

多层级获取数据不需要进行额外处理

import React from "react";
import Form from "react-den-form";

export default () => {
  return (
    

      
 console.log(data)}>
        

          

            

              
            

            
          

        

      

    

  );
};

当我们输入数据时, onChange 方法打印如下:

{userName: "333", password: "555"}

子函数组件也不需额外处理

import React from "react";
import Form from "react-den-form";

function SubInput() {
  return (
    

      

        
      

    

  );
}

export default () => {
  return (
    

      
 console.log(data)}>
        

          

            

              
            

            
            
          

        

      

    

  );
};

当我们输入数据时, onChange 方法打印如下:

{userName: "333", password: "555", subPassword: "666"}

Form 组件嵌套不需要处理

由于 Form 内部有一个 form 标签, 外层 onSubmit 会捕获所有子组件的 onSubmit 事件, 但是 data 数据只会捕获 当前层级内的 field 对象

export default () => {
  return (
    

      {/* 此 Form 只会捕获 userName及password, age及vipLevel被子Form拦截了 */}
      
 console.log("1", data)}>
        
        
        {/* 此 Form 只会捕获 age及vipLevel */}
         console.log("2", data)}>
          
          
        

      
    

  );
};

自定义 Input 组件

如果我们自己定义的特殊组件, 需要满足两个条件:

  1. 组件外部的 props 需要设置 field 属性
  2. 组件内部需要使用 this.props.onChange 返回数据
import React from "react";
import Form from "react-den-form";

class SubInput extends React.Component {
  handleOnChange = e => {
    // 需要使用 this.props.onChange 返回数据
    this.props.onChange(e.target.value);
  };

  render() {
    return ;
  }
}

export default () => {
  return (
    

      
 console.log(data)}>
        {/* 需要设置 field 属性 */}
        
      
    

  );
};

类组件的嵌套需要使用 toForm 进行处理

被 Form 组件包裹过的类组件的 props 都会有一个 toForm 的函数

类组件不同于函数组件, 需要使用 toForm 对其内部的 render 返回值进行处理, 才可以识别其内部有 field 属性的对象, 将其划分在 Form 组件的监管范围内:

import React from "react";
import Form from "react-den-form";

// 例子, 这是一个有表单的页面, 使用类组件进行编写
class HomePage extends React.Component {
  render() {
    // 需要使用 toForm 处理返回值
    return this.props.toForm(
      

        
        

          
输入区域

          
        

      

    );
  }
}

export default () => {
  return (
    

      
 console.log(data)}>
        
      
    

  );
};

使用 onChangeGetter 获取自定义组件的值

以下标签, From 会自动识别 onChange 的返回值, 进行解析获取

import React from "react";
import Form from "react-den-form";

export default () => {
  return (
    

      
 console.log(args)}>