手机怎么网站建设,胶州网站制作,网站建设微信托管,企业信息系统官网表单是html的基础元素#xff0c;接下来我会用React实现一个表单组件。支持包括输入状态管理#xff0c;表单验证#xff0c;错误信息展示#xff0c;表单提交#xff0c;动态表单元素等功能。
数据状态 表单元素的输入状态管理#xff0c;可以基于react state 实现。
… 表单是html的基础元素接下来我会用React实现一个表单组件。支持包括输入状态管理表单验证错误信息展示表单提交动态表单元素等功能。
数据状态 表单元素的输入状态管理可以基于react state 实现。
const [formData, setFormData] useState(initial_data); 参数校验 在表单元素变更后对变更结果进行验证若验证失败则更新失败状态若验证成功则更新数据状态, 并移除之前老的失败状态。
/*** 表单错误状态*/
const [errors, setErrors] useState({});/*** 表单数据变更处理函数*/
const setFieldData (name, value) {// 进行参数校验if (validators validators[name]) {const error validators[name](value);if (error) {setErrors((errors) ({...errors, [name]: error}));return;}setErrors((errors) {const newErrors {...errors};delete newErrors[name];return newErrors;})}// 更新表单数据setFormData({...formData,[name]: value});
}
表单提交 表单提交需要判断是否有校验失败错误如果有的话提交失败如果没有提交成功。
/*** 表单提交处理函数*/
const handleSubmit (e) {e.preventDefault();if (errors Object.keys(errors).length 0) {console.log(表单校验未通过);return;}if (submitFunc) {console.log(开始执行提交函数);submitFunc(formData);}
}表单项组件 表单项组件会根据参数不同的类型返回不同的组件并且error和fieldData,setFieldData与父组件Form绑定。
/*** 表单项组件*/
const FormItem ({name, type, error, label, fieldData, setFieldData}) {if (type submit) {return (divinput typesubmit value{label}//div)} else if (type text) {return (divlabel htmlFor{name}{label}/labelinput typetext name{name} value{fieldData} onChange{e setFieldData(name, e.target.value)}/{error span{error}/span}/div)} else if (type password) {return (divlabel htmlFor{name}{label}/labelinput typepassword name{name} value{fieldData}onChange{e setFieldData(name, e.target.value)}/{error span{error}/span}/div)}return null;
}
组件整体代码 Form组件是基于React实现并对表单form的功能进行日常封装。
import {useState} from react;/*** 表单组件* param initial_data 初始数据* param validators 校验器* param submitFunc 提交函数* param children FormItem组件列表*/
const Form ({initial_data, validators, submitFunc, children}) {/*** 表单数据状态*/const [formData, setFormData] useState(initial_data);/*** 表单错误状态*/const [errors, setErrors] useState({});/*** 表单数据变更处理函数*/const setFieldData (name, value) {// 进行参数校验if (validators validators[name]) {const error validators[name](value);if (error) {setErrors((errors) ({...errors, [name]: error}));return;}setErrors((errors) {const newErrors {...errors};delete newErrors[name];return newErrors;})}// 更新表单数据setFormData({...formData,[name]: value});}/*** 表单提交处理函数*/const handleSubmit (e) {e.preventDefault();if (errors Object.keys(errors).length 0) {console.log(表单校验未通过);return;}if (submitFunc) {console.log(开始执行提交函数);submitFunc(formData);}}return (divform onSubmit{handleSubmit}{children.map((child, index) {return (FormItemkey{index}name{child.props.name}label{child.props.label}error{errors[child.props.name]}type{child.props.type}setFieldData{setFieldData}{child}/FormItem)})}/form/div/)
}/*** 表单项组件*/
const FormItem ({name, type, error, label, fieldData, setFieldData}) {if (type submit) {return (divinput typesubmit value{label}//div)} else if (type text) {return (divlabel htmlFor{name}{label}/labelinput typetext name{name} value{fieldData} onChange{e setFieldData(name, e.target.value)}/{error span{error}/span}/div)} else if (type password) {return (divlabel htmlFor{name}{label}/labelinput typepassword name{name} value{fieldData}onChange{e setFieldData(name, e.target.value)}/{error span{error}/span}/div)}return null;
}export {Form, FormItem};使用样例 效果图见下图使用样例代码见下方代码。
function App() {return (divForm submitFunc{(data) console.log(data)} initial_data{{username: vicyor, password: 123456}}validators{{password: (val) {if (val.length 6) {return 密码长度不能小于6;}}}} FormItem nameusername label用户名 typetext/FormItem namepassword label密码 typepassword/FormItem namesubmit label提交 typesubmit//Form/div);
}
