一、介绍

        本文将会基于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 (<><form className = "comment-box" onSubmit = {this.handleSubmit}><div><label>Name:</label> <input value = {this.state.name} onchange = {this.handleNameChange}/></div>{userState.error && <span>userstate.error</span>}<div><button>Submit</button></div></form>{userState.data && <ul>userState.data.map((user)=> <li>user.name</li>)</ul>}</>)    }}

user-service.js

export const userFetchUserList = () => {const initialState = {data:[], isLoading:false, error:null};// reducerfunction reducer(state, action){switch (action.type){case FETCH_USER_LIST_BEGIN:return (data:[action.res.data], isLoading: true, error:null);case FETCH_USER_LIST_SUCCESS:return (...state, isLoading: false, error:null);case FETCH_USER_LIST_ERROR:return (...state, isLoading: false, error:res.data.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 = {colon: true,columns:1,elements: [{key: "userName",label: "User name",tooltip: "user name",widget: Input,required: true}]
}

b. 自定义表单组件

const CustomForm = ({meta}) => {function renderFormItem = (item) => {const { widget: WidgetComponent, key, label, tooltip, required } = item;return (<Form.Itemkey={key}label={<span>{label}{tooltip && <Tooltip title={tooltip}></Tooltip>}</span>}name={key}rules={[{ required, message: `Please input your ${label}!` }]}><WidgetComponent placeholder={`Please input your ${label}`} /></Form.Item>);        }const renderFormItems = () => {if (meta && meta.elements) {return meta.elements.map((item) => renderFormItem(item));}return null;};    return (<Formform={form}name="custom_form"onFinish={onFinish}initialValues={formData}labelCol={{ span: meta.columns }}wrapperCol={{ span: meta.columns }}>{renderFormItems()}{{children}}<Form.Item><Button type="primary" htmlType="submit">Submit</Button></Form.Item></Form>);
}

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 (<Form name = "basic" onFinish = {onFinish}><Form.Item label = "年龄" name = "age" rules = {[{required:true, message:'请输入年龄!'},{validator: validateAge}]}   ><Input type = "number"/></Form.Item></Form>);
}export default DemoForm;