一、介绍
本文将会基于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框架