React 表单组件实现

一、介绍

        本文将会基于react实现表单的功能，包括表单提交和跳转、表单验证、动态表单元素、动态内容加载。

二、使用教程

1.表单提交功能

export default class FormSubmit extends React.PureComponent{
    
    state = {
        name: ""
    }

    handleNameChange = evt => {
        this.setState({
            name: evt.target.value
        });

    }

    handleSubmit = evt => {
        evt.preventDefault(); // 阻止默认事件
        if (!this.state.name){
            this.setState({error: "Name is required"});
            return;
        }
        fetchUserList(this.state.name);        
    }
    
    const {userState, fetchUserList} = useFetchUserList();

    render(){
        return (
            <>
            

                

                    Name: 
                    
                
                {userState.error && userstate.error}
                

                    Submit
                
            
            {userState.data && 
userState.data.map((user)=> 
user.name
)
}
            
        )    
    
    }


    

}

user-service.js

export const useFetchUserList = () => {
    const initialState = {data:[], isLoading:false, error:null};

  // reducer
  function reducer(state, action){
    switch (action.type){
        case FETCH_USER_LIST_BEGIN:
            return (...state, isLoading: true, error:null);
        case FETCH_USER_LIST_SUCCESS:
            return (data:action.data, isLoading: false, error:null);
        case FETCH_USER_LIST_ERROR:
            return (...state, isLoading: false, 
                    error:action.error);
    
    }
    
  }

  const [state, dispatch] = useReducer(reducer, initialState);

  function fetchUserList(){

     dispatch({type: FETCH_USER_LIST_BEGIN});    
     
     const doRequest = axios.get("http://www.user.com/user/list");
     doRequest.then(
                res => {
                    dispatch({
                        type: FETCH_USER_LIST_BEGIN,
                        data: res.data
                    });
                },
                err => {
                    dispatch({
                        type: FETCH_USER_LIST_ERROR,
                        data: {error:err}
                        }
                    );
          
                }
            );
   }
    
    return {state, fetchUserList};
}

2.动态表单元素 

a.定义meta

const formMeta = {

    elements: [
        {
            key: "userName",
            label: "User name",
            widget: Input
        }

    ]
}

b. 自定义表单组件

const CustomForm = ({meta}) => {
    
    function renderFormItem = (item) => {
        const { widget: WidgetComponent, key, label, required } = item;
        return (
          
                {label}
              
            }
            name={key}
          >
            
          
        );        
    }


   const renderFormItems = () => {
        if (meta && meta.elements) {
          return meta.elements.map((item) => renderFormItem(item));
        }
        return null;
      };    


   return (
    

      {renderFormItems()}
      {{children}}
      
        
          Submit
        
      
    
  );
}

3.表单元素验证

   直接使用ant design提供的Form能力

import {Form, Input, Button} from 'antd';

const DemoForm = () => {
    const onFinish = (values) =>{
        console.log('Received values:', values);
    };
    
    const validateAge = (rule, age) => {
        if (age && age < 18){
            return Promise.reject('年龄必须大于18岁!');
        } 
        return Promise.resolve();
    }

    return (
        

            
                
            
        
    );
}

export default DemoForm;