React事件处理和表单类型完全指南 - 企业级实战手册

🚀 React事件处理和表单类型完全指南 - 企业级实战手册

📋 目录导航

🎯 文章导览：本文将带您深入React事件处理和表单开发的核心领域，从基础概念到企业级实战，助您成为React表单开发专家！

📚 学习前置要求

🎯 适合读者：

• ✅ 具备React基础知识和组件开发经验
• ✅ 了解TypeScript基本语法和类型系统
• ✅ 希望深入学习表单验证和事件处理机制
• ✅ 追求企业级代码质量和最佳实践

🔧 技术栈版本：

{"react":"^18.2.0","typescript":"^5.0.0","node":">=16.0.0"}

🎯 核心价值概述

🏆 企业级开发能力：本文不仅教授React事件处理和表单开发的基础知识，更重要的是提供可直接用于生产环境的完整解决方案，包括：

• 🛡️ 类型安全保障：完整的TypeScript类型定义，让错误在编译时被发现
• ⚡ 性能优化策略：深入理解React事件机制，避免常见性能陷阱
• 🎨 用户体验设计：实时验证、友好错误提示、流畅交互体验
• 🏗️ 架构设计模式：可复用、可维护的表单组件架构
• 🔒 安全考虑：XSS防护、数据验证、输入过滤等安全实践

🎯 React事件类型系统

🔄 React合成事件机制深度解析

🎯 什么是React合成事件？

React合成事件（SyntheticEvent）是React对原生DOM事件的跨浏览器封装，它提供了统一的API接口，消除了不同浏览器之间的差异，并通过事件委托机制提升了性能。

🔧 核心机制详解：

1. 事件委托（Event Delegation）：React将所有事件监听器绑定到document上，利用事件冒泡机制统一处理
2. 事件池（Event Pooling）：重用事件对象，减少GC压力，提升性能（React 17中已被优化）
3. 跨浏览器兼容：消除IE、Firefox、Chrome等浏览器的API差异
4. 合成事件属性：提供一致的属性接口，如e.target、e.preventDefault()等

📊 性能优势对比：

📊 基础事件类型详解

🎯 React事件类型体系概览

React提供了丰富的事件类型，每个事件类型都有其对应的TypeScript接口，确保编译时类型安全和IDE智能提示。

importReact,{useState,FormEvent,ChangeEvent,MouseEvent,KeyboardEvent,FocusEvent,DragEvent,WheelEvent}from'react';// 🎯 企业级事件处理器组件constEventHandlingExamples:React.FC=()=>{const[message,setMessage]=useState('');const[clickCount,setClickCount]=useState(0);const[inputValue,setInputValue]=useState('');const[eventLog,setEventLog]=useState<string[]>([]);// 📊 日志记录函数（调试神器）constlogEvent=useCallback((eventName:string,details?:any)=>{constlogEntry=`[${newDate().toISOString()}]${eventName}:${JSON.stringify(details)}`;setEventLog(prev=>[...prev.slice(-4),logEntry]);// 只保留最新5条console.log(logEntry);},[]);// 🔄 表单提交事件（企业级处理）consthandleSubmit=(e:FormEvent<HTMLFormElement>)=>{e.preventDefault();// 阻止表单默认提交行为logEvent('FormSubmit',{formId:e.currentTarget.id,action:e.currentTarget.action});// TypeScript保证我们访问表单元素是类型安全的constformData=newFormData(e.currentTarget);constdata=Object.fromEntries(formData);// 企业级数据验证和清理constcleanData=Object.entries(data).reduce((acc,[key,value])=>{acc[key]=typeofvalue==='string'?value.trim():value;returnacc;},{}asRecord<string,any>);console.log('清理后的表单数据:',cleanData);setMessage('✅ 表单提交成功！数据已验证并清理');};// 📝 输入框变化事件（企业级实现）consthandleInputChange=(e:ChangeEvent<HTMLInputElement>)=>{// TypeScript类型安全：e.target是HTMLInputElement类型const{value,type,name,dataset}=e.target;// 根据不同类型进行特殊处理switch(type){case'email':// 邮箱实时验证提示constemailRegex=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;if(value&&!emailRegex.test(value)){console.warn('⚠️ 邮箱格式不正确');}break;case'number':// 数字输入验证constnumValue=parseFloat(value);if(isNaN(numValue)){console.warn('⚠️ 请输入有效数字');}break;default:// 通用处理逻辑break;}// 访问自定义数据属性（类型安全）if(dataset.validation){console.log(`🔍 字段验证规则:${dataset.validation}`);}setInputValue(value);logEvent('InputChange',{fieldName:name,fieldType:type,valueLength:value.length});};// 🖱️ 鼠标点击事件（企业级交互分析）consthandleMouseClick=(e:MouseEvent<HTMLButtonElement>)=>{// 鼠标事件的完整属性访问（TypeScript类型安全）constmouseInfo={coordinates:{x:e.clientX,y:e.clientY},screenCoords:{x:e.screenX,y:e.screenY},button:e.button,// 0=左键, 1=中键, 2=右键buttons:e.buttons,// 按键状态timestamp:e.timeStamp,targetInfo:{tagName:e.currentTarget.tagName,className:e.currentTarget.className,textContent:e.currentTarget.textContent}};logEvent('MouseClick',mouseInfo);setClickCount(prev=>prev+1);// 企业级用户行为分析constinteractionData={clickCount:clickCount+1,action:e.currentTarget.dataset.action||'unknown',elementId:e.currentTarget.id,timestamp:Date.now()};console.log('📊 用户交互数据:',interactionData);// 可选：发送数据到分析服务// analytics.track('button_click', interactionData);};// ⌨️ 键盘事件consthandleKeyDown=(e:KeyboardEvent<HTMLInputElement>)=>{console.log('按键:',e.key);console.log('键码:',e.keyCode);// 常用的键盘快捷键处理if(e.key==='Enter'&&e.ctrlKey){console.log('Ctrl+Enter 快捷键触发');}// 阻止特定按键if(e.key===' '){e.preventDefault();console.log('阻止空格键输入');}};// 🎯 焦点事件consthandleFocus=(e:FocusEvent<HTMLInputElement>)=>{console.log('输入框获得焦点:',e.target.name);e.target.style.borderColor='#007bff';};consthandleBlur=(e:FocusEvent<HTMLInputElement>)=>{console.log('输入框失去焦点:',e.target.name);e.target.style.borderColor='#ced4da';// 可以在这里进行字段验证if(!e.target.value.trim()){console.warn('字段不能为空');}};// 🎚️ 拖拽事件consthandleDragStart=(e:DragEvent<HTMLDivElement>)=>{console.log('开始拖拽:',e.currentTarget);e.dataTransfer.setData('text/plain',e.currentTarget.id);};consthandleDrop=(e:DragEvent<HTMLDivElement>)=>{e.preventDefault();constdata=e.dataTransfer.getData('text/plain');console.log('拖拽完成:',data);};// 🎨 滚轮事件consthandleWheel=(e:WheelEvent<HTMLDivElement>)=>{console.log('滚轮方向:',e.deltaY>0?'向下':'向上');console.log('滚轮量:',e.deltaY);};return(<div><h2>事件处理示例</h2>{/* 📝 表单提交事件 */}<form onSubmit={handleSubmit}><inputtype="text"name="username"placeholder="用户名"value={inputValue}onChange={handleInputChange}onKeyDown={handleKeyDown}onFocus={handleFocus}onBlur={handleBlur}/><buttontype="submit">提交表单</button></form>{/* 🖱️ 鼠标事件 */}<button onClick={handleMouseClick}>点击次数:{clickCount}</button>{/* 🎚️ 拖拽事件 */}<div><div id="draggable"draggable onDragStart={handleDragStart}style={{width:'100px',height:'50px',backgroundColor:'#007bff',color:'white',display:'flex',alignItems:'center',justifyContent:'center',margin:'10px 0',cursor:'move'}}>拖拽我</div><div onDrop={handleDrop}onDragOver={(e)=>e.preventDefault()}style={{width:'200px',height:'100px',border:'2px dashed #ced4da',display:'flex',alignItems:'center',justifyContent:'center'}}>拖拽到这里</div></div>{/* 🎨 滚轮事件 */}<div onWheel={handleWheel}style={{width:'200px',height:'100px',border:'1px solid #007bff',overflow:'auto',padding:'10px'}}><div style={{height:'300px'}}>在这里滚动鼠标滚轮</div></div>{message&&<p style={{color:'green'}}>{message}</p>}</div>);};

📊 高级事件类型应用

importReact,{useState,useRef,useEffect,TouchEvent,ClipboardEvent,AnimationEvent,TransitionEvent,PointerEvent}from'react';// 🎯 高级事件处理组件constAdvancedEventHandling:React.FC=()=>{const[touchInfo,setTouchInfo]=useState('');const[clipboardData,setClipboardData]=useState('');const[animationState,setAnimationState]=useState('');const[transitionState,setTransitionState]=useState('');const[pointerInfo,setPointerInfo]=useState('');constvideoRef=useRef<HTMLVideoElement>(null);// 📱 触摸事件处理consthandleTouchStart=(e:TouchEvent<HTMLDivElement>)=>{consttouch=e.touches[0];setTouchInfo(`触摸开始: (${touch.clientX},${touch.clientY})`);// 阻止默认行为（如页面滚动）if(e.touches.length===2){e.preventDefault();console.log('双指触摸，阻止默认行为');}};consthandleTouchMove=(e:TouchEvent<HTMLDivElement>)=>{consttouch=e.touches[0];setTouchInfo(prev=>`${prev}-> 移动: (${touch.clientX},${touch.clientY})`);};consthandleTouchEnd=(e:TouchEvent<HTMLDivElement>)=>{setTouchInfo(prev=>`${prev}- 触摸结束`);};// 📋 剪贴板事件consthandleCopy=(e:ClipboardEvent<HTMLInputElement>)=>{constselectedText=e.currentTarget.value.substring(e.currentTarget.selectionStart||0,e.currentTarget.selectionEnd||e.currentTarget.value.length);// 自定义复制内容e.clipboardData.setData('text/plain',`复制的内容:${selectedText}`);e.preventDefault();setClipboardData(`已复制:${selectedText}`);};consthandlePaste=(e:ClipboardEvent<HTMLInputElement>)=>{constpastedData=e.clipboardData.getData('text/plain');// 过滤敏感内容constfilteredData=pastedData.replace(/密码|password/gi,'***');e.preventDefault();// 将过滤后的内容插入到输入框constinput=e.currentTarget;conststart=input.selectionStart||0;constend=input.selectionEnd||0;constnewValue=input.value.substring(0,start)+filteredData+input.value.substring(end);input.value=newValue;setClipboardData(`已粘贴:${filteredData}`);};// 🎬 动画事件consthandleAnimationStart=(e:AnimationEvent<HTMLDivElement>)=>{setAnimationState(`动画开始:${e.animationName}`);console.log('动画时长:',e.elapsedTime);};consthandleAnimationEnd=(e:AnimationEvent<HTMLDivElement>)=>{setAnimationState(`动画结束:${e.animationName}`);};// 🎭 过渡事件consthandleTransitionEnd=(e:TransitionEvent<HTMLButtonElement>)=>{setTransitionState(`过渡完成:${e.propertyName}`);console.log('过渡时长:',e.elapsedTime);};// 👆 指针事件（统一的鼠标/触摸/笔输入）consthandlePointerEnter=(e:PointerEvent<HTMLDivElement>)=>{constpointerType=e.pointerType;// 'mouse', 'pen', 'touch'setPointerInfo(`指针进入: 类型=${pointerType}, 压力=${e.pressure}`);};consthandlePointerDown=(e:PointerEvent<HTMLDivElement>)=>{console.log('指针按下:',{pointerId:e.pointerId,width:e.width,height:e.height,tiltX:e.tiltX,tiltY:e.tiltY});};// 🎬 媒体事件consthandleVideoPlay=()=>{console.log('视频开始播放');};consthandleVideoPause=()=>{console.log('视频暂停');};consthandleVideoEnded=()=>{console.log('视频播放结束');};consthandleTimeUpdate=()=>{if(videoRef.current){constcurrentTime=videoRef.current.currentTime;constduration=videoRef.current.duration;constprogress=(currentTime/duration)*100;console.log(`播放进度:${progress.toFixed(2)}%`);}};return(<div><h2>高级事件处理</h2>{/* 📱 触摸事件 */}<section><h3>触摸事件</h3><div onTouchStart={handleTouchStart}onTouchMove={handleTouchMove}onTouchEnd={handleTouchEnd}style={{width:'200px',height:'100px',backgroundColor:'#e3f2fd',display:'flex',alignItems:'center',justifyContent:'center',touchAction:'none'// 禁用默认触摸行为}}>触摸测试区域</div><p>{touchInfo}</p></section>{/* 📋 剪贴板事件 */}<section><h3>剪贴板事件</h3><inputtype="text"placeholder="输入文本，测试复制和粘贴"onCopy={handleCopy}onPaste={handlePaste}style={{width:'300px',padding:'8px'}}/><p>{clipboardData}</p></section>{/* 🎬 动画事件 */}<section><h3>动画事件</h3><div onAnimationStart={handleAnimationStart}onAnimationEnd={handleAnimationEnd}style={{width:'100px',height:'50px',backgroundColor:'#4caf50',color:'white',display:'flex',alignItems:'center',justifyContent:'center',animation:'pulse 2s infinite'}}>动画元素</div><p>{animationState}</p></section>{/* 🎭 过渡事件 */}<section><h3>过渡事件</h3><button onTransitionEnd={handleTransitionEnd}style={{padding:'10px 20px',backgroundColor:'#ff9800',color:'white',border:'none',borderRadius:'4px',transition:'all 0.3s ease'}}onMouseEnter={(e)=>{e.currentTarget.style.transform='scale(1.1)';}}onMouseLeave={(e)=>{e.currentTarget.style.transform='scale(1)';}}>悬停测试</button><p>{transitionState}</p></section>{/* 👆 指针事件 */}<section><h3>指针事件</h3><div onPointerEnter={handlePointerEnter}onPointerDown={handlePointerDown}style={{width:'150px',height:'80px',backgroundColor:'#9c27b0',color:'white',display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer'}}>指针测试</div><p>{pointerInfo}</p></section>{/* 🎬 媒体事件 */}<section><h3>媒体事件</h3><video ref={videoRef}width="300"controls onPlay={handleVideoPlay}onPause={handleVideoPause}onEnded={handleVideoEnded}onTimeUpdate={handleTimeUpdate}><source src="https://example.com/video.mp4"type="video/mp4"/>您的浏览器不支持视频播放</video></section><style jsx>{`@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }`}</style></div>);};exportdefaultAdvancedEventHandling;

📊 React事件类型参考表

🎯 常用事件类型速查手册

🚀 高级事件类型

🛡️ 事件处理最佳实践

// ✅ 推荐的企业级事件处理模式constEnterpriseEventHandler:React.FC=()=>{// 🎯 使用useCallback避免重复创建函数consthandleClick=useCallback((e:MouseEvent<HTMLButtonElement>)=>{// 📊 记录用户行为analytics.track('button_click',{element:e.currentTarget.id,timestamp:Date.now()});// 🔄 业务逻辑处理// ...},[]);// 空依赖数组，函数引用稳定// ⚡ 使用useMemo缓存复杂计算consteventHandlers=useMemo(()=>({onClick:handleClick,onMouseEnter:(e:MouseEvent)=>{// 悬停效果处理},onFocus:(e:FocusEvent)=>{// 焦点状态管理}}),[handleClick]);return(<button{...eventHandlers}>企业级按钮</button>);};

📝 表单验证实现

🎯 表单验证架构设计

🔧 完整表单验证系统

importReact,{useState,useCallback,useEffect}from'react';// 🎯 验证规则类型定义interfaceValidationRule{required?:boolean;minLength?:number;maxLength?:number;min?:number;max?:number;pattern?:RegExp;email?:boolean;url?:boolean;custom?:(value:any)=>string|null;async?:(value:any)=>Promise<string|null>;}// 📝 表单字段类型interfaceFormField<T=any>{value:T;error:string|null;touched:boolean;dirty:boolean;validating:boolean;}// 📊 表单状态类型interfaceFormState<TextendsRecord<string,any>>{fields:{[KinkeyofT]:FormField<T[K]>;};isValid:boolean;isSubmitting:boolean;submitCount:number;}// 🎯 验证器类classFormValidator{// ✅ 必填验证staticrequired(value:any):string|null{if(value===null||value===undefined||(typeofvalue==='string'&&value.trim()==='')||(Array.isArray(value)&&value.length===0)){return'此字段为必填项';}returnnull;}// 📏 长度验证staticlength(value:string,min?:number,max?:number):string|null{if(typeofvalue!=='string')returnnull;if(min&&value.length<min){return`最少需要${min}个字符`;}if(max&&value.length>max){return`最多允许${max}个字符`;}returnnull;}// 🔢 数值范围验证staticrange(value:number,min?:number,max?:number):string|null{if(typeofvalue!=='number')returnnull;if(min!==undefined&&value<min){return`值不能小于${min}`;}if(max!==undefined&&value>max){return`值不能大于${max}`;}returnnull;}// 📧 邮箱验证staticemail(value:string):string|null{if(typeofvalue!=='string')returnnull;constemailRegex=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;if(!emailRegex.test(value)){return'请输入有效的邮箱地址';}returnnull;}// 🌐 URL验证staticurl(value:string):string|null{if(typeofvalue!=='string')returnnull;try{newURL(value);returnnull;}catch{return'请输入有效的URL地址';}}// 🎯 正则表达式验证staticpattern(value:string,pattern:RegExp,message?:string):string|null{if(typeofvalue!=='string')returnnull;if(!pattern.test(value)){returnmessage||'格式不正确';}returnnull;}// 🔄 综合验证staticasyncvalidate(value:any,rules:ValidationRule):Promise<string|null>{// 必填验证if(rules.required){constrequiredError=this.required(value);if(requiredError)returnrequiredError;}// 如果值为空且不是必填，跳过其他验证if(value===null||value===undefined||(typeofvalue==='string'&&value.trim()==='')){returnnull;}// 字符串长度验证if(typeofvalue==='string'){constlengthError=this.length(value,rules.minLength,rules.maxLength);if(lengthError)returnlengthError;}// 数值范围验证if(typeofvalue==='number'){constrangeError=this.range(value,rules.min,rules.max);if(rangeError)returnrangeError;}// 邮箱验证if(rules.email){constemailError=this.email(value);if(emailError)returnemailError;}// URL验证if(rules.url){consturlError=this.url(value);if(urlError)returnurlError;}// 正则表达式验证if(rules.pattern){constpatternError=this.pattern(value,rules.pattern);if(patternError)returnpatternError;}// 自定义同步验证if(rules.custom){constcustomError=rules.custom(value);if(customError)returncustomError;}// 异步验证if(rules.async){returnawaitrules.async(value);}returnnull;}}// 🎯 自定义Hook：表单管理functionuseForm<TextendsRecord<string,any>>(initialValues:T,validationRules:{[KinkeyofT]?:ValidationRule},onSubmit:(values:T)=>void|Promise<void>){const[formState,setFormState]=useState<FormState<T>>(()=>{constinitialFields:any={};Object.keys(initialValues).forEach(key=>{initialFields[key]={value:initialValues[keyaskeyofT],error:null,touched:false,dirty:false,validating:false};});return{fields:initialFields,isValid:false,isSubmitting:false,submitCount:0};});// 🔍 验证单个字段constvalidateField=useCallback(async(fieldName:keyofT,value:any):Promise<string|null>=>{construles=validationRules[fieldName];if(!rules)returnnull;returnawaitFormValidator.validate(value,rules);},[validationRules]);// 🔄 设置字段值constsetFieldValue=useCallback((fieldName:keyofT,value:any)=>{setFormState(prev=>{constfield=prev.fields[fieldName];constisDirty=value!==field.value;return{...prev,fields:{...prev.fields,[fieldName]:{...field,value,dirty:isDirty,error:isDirty&&field.touched?null:field.error}}};});},[]);// 🖱️ 字段失焦处理consthandleFieldBlur=useCallback(async(fieldName:keyofT)=>{setFormState(prev=>({...prev,fields:{...prev.fields,[fieldName]:{...prev.fields[fieldName],touched:true,validating:true}}}));constfield=formState.fields[fieldName];consterror=awaitvalidateField(fieldName,field.value);setFormState(prev=>({...prev,fields:{...prev.fields,[fieldName]:{...prev.fields[fieldName],error,validating:false}}}));},[formState.fields,validateField]);// 🔄 验证整个表单constvalidateForm=useCallback(async():Promise<boolean>=>{letisValid=true;constnewFields={...formState.fields};// 设置所有字段为验证中状态Object.keys(newFields).forEach(key=>{newFields[keyaskeyofT]={...newFields[keyaskeyofT],touched:true,validating:true};});setFormState(prev=>({...prev,fields:newFields}));// 逐个验证字段for(constfieldNameofObject.keys(newFields)){constfield=newFields[fieldNameaskeyofT];consterror=awaitvalidateField(fieldNameaskeyofT,field.value);newFields[fieldNameaskeyofT]={...field,error,validating:false};if(error)isValid=false;}setFormState(prev=>({...prev,fields:newFields,isValid}));returnisValid;},[formState.fields,validateField]);// 📤 提交表单consthandleSubmit=useCallback(async(e?:React.FormEvent)=>{e?.preventDefault();setFormState(prev=>({...prev,isSubmitting:true,submitCount:prev.submitCount+1}));constisValid=awaitvalidateForm();if(isValid){constvalues:any={};Object.keys(formState.fields).forEach(key=>{values[keyaskeyofT]=formState.fields[keyaskeyofT].value;});try{awaitonSubmit(values);}catch(error){console.error('表单提交失败:',error);}}setFormState(prev=>({...prev,isSubmitting:false}));},[formState.fields,validateForm,onSubmit]);// 🔄 重置表单constresetForm=useCallback(()=>{constresetFields:any={};Object.keys(initialValues).forEach(key=>{resetFields[keyaskeyofT]={value:initialValues[keyaskeyofT],error:null,touched:false,dirty:false,validating:false};});setFormState({fields:resetFields,isValid:false,isSubmitting:false,submitCount:0});},[initialValues]);// 📊 获取表单值constgetValues=useCallback(():T=>{constvalues:any={};Object.keys(formState.fields).forEach(key=>{values[keyaskeyofT]=formState.fields[keyaskeyofT].value;});returnvalues;},[formState.fields]);return{formState,setFieldValue,handleFieldBlur,handleSubmit,resetForm,getValues,validateForm};}// 💡 使用示例：用户注册表单interfaceRegistrationForm{username:string;email:string;password:string;confirmPassword:string;age:number;website:string;bio:string;terms:boolean;}constRegistrationForm:React.FC=()=>{const{formState,setFieldValue,handleFieldBlur,handleSubmit,resetForm}=useForm<RegistrationForm>({username:'',email:'',password:'',confirmPassword:'',age:0,website:'',bio:'',terms:false},{username:{required:true,minLength:3,maxLength:20,pattern:/^[a-zA-Z0-9_]+$/,custom:(value:string)=>{if(value.includes('admin')){return'用户名不能包含敏感词';}returnnull;}},email:{required:true,email:true,async:async(value:string)=>{// 模拟异步检查邮箱是否已存在awaitnewPromise(resolve=>setTimeout(resolve,1000));if(value==='admin@example.com'){return'该邮箱已被注册';}returnnull;}},password:{required:true,minLength:8,maxLength:20,pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8,}$/,custom:(value:string)=>{if(!value.match(/[!@#$%^&*(),.?":{}|<>]/)){return'密码必须包含至少一个特殊字符';}returnnull;}},confirmPassword:{required:true,custom:(value:string,formData?:RegistrationForm)=>{if(formData&&value!==formData.password){return'两次密码输入不一致';}returnnull;}},age:{required:true,min:18,max:120},website:{url:true,custom:(value:string)=>{if(value&&!value.startsWith('https://')){return'网站必须使用HTTPS协议';}returnnull;}},bio:{maxLength:500,custom:(value:string)=>{if(value&&value.length<10){return'个人简介至少需要10个字符';}returnnull;}},terms:{required:true,custom:(value:boolean)=>{if(!value){return'请同意服务条款';}returnnull;}}},async(values)=>{console.log('提交表单:',values);// 模拟API调用awaitnewPromise(resolve=>setTimeout(resolve,2000));alert('注册成功！');resetForm();});const{fields}=formState;return(<div style={{maxWidth:'600px',margin:'0 auto',padding:'20px'}}><h2>用户注册</h2><p>所有带*的字段为必填项</p><form onSubmit={handleSubmit}>{/* 用户名 */}<div style={{marginBottom:'15px'}}><label htmlFor="username">用户名*</label><inputtype="text"id="username"value={fields.username.value}onChange={(e)=>setFieldValue('username',e.target.value)}onBlur={()=>handleFieldBlur('username')}style={{width:'100%',padding:'8px',border:fields.username.error?'1px solid red':'1px solid #ccc',borderRadius:'4px'}}/>{fields.username.touched&&fields.username.error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{fields.username.error}</p>)}{fields.username.validating&&(<p style={{color:'blue',fontSize:'14px',margin:'5px 0'}}>验证中...</p>)}</div>{/* 邮箱 */}<div style={{marginBottom:'15px'}}><label htmlFor="email">邮箱*</label><inputtype="email"id="email"value={fields.email.value}onChange={(e)=>setFieldValue('email',e.target.value)}onBlur={()=>handleFieldBlur('email')}style={{width:'100%',padding:'8px',border:fields.email.error?'1px solid red':'1px solid #ccc',borderRadius:'4px'}}/>{fields.email.touched&&fields.email.error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{fields.email.error}</p>)}{fields.email.validating&&(<p style={{color:'blue',fontSize:'14px',margin:'5px 0'}}>检查邮箱是否可用...</p>)}</div>{/* 密码 */}<div style={{marginBottom:'15px'}}><label htmlFor="password">密码*</label><inputtype="password"id="password"value={fields.password.value}onChange={(e)=>setFieldValue('password',e.target.value)}onBlur={()=>handleFieldBlur('password')}style={{width:'100%',padding:'8px',border:fields.password.error?'1px solid red':'1px solid #ccc',borderRadius:'4px'}}/>{fields.password.touched&&fields.password.error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{fields.password.error}</p>)}<small style={{color:'#666'}}>密码必须包含大小写字母、数字和特殊字符，至少8位</small></div>{/* 确认密码 */}<div style={{marginBottom:'15px'}}><label htmlFor="confirmPassword">确认密码*</label><inputtype="password"id="confirmPassword"value={fields.confirmPassword.value}onChange={(e)=>setFieldValue('confirmPassword',e.target.value)}onBlur={()=>handleFieldBlur('confirmPassword')}style={{width:'100%',padding:'8px',border:fields.confirmPassword.error?'1px solid red':'1px solid #ccc',borderRadius:'4px'}}/>{fields.confirmPassword.touched&&fields.confirmPassword.error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{fields.confirmPassword.error}</p>)}</div>{/* 年龄 */}<div style={{marginBottom:'15px'}}><label htmlFor="age">年龄*</label><inputtype="number"id="age"value={fields.age.value||''}onChange={(e)=>setFieldValue('age',parseInt(e.target.value)||0)}onBlur={()=>handleFieldBlur('age')}style={{width:'100%',padding:'8px',border:fields.age.error?'1px solid red':'1px solid #ccc',borderRadius:'4px'}}/>{fields.age.touched&&fields.age.error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{fields.age.error}</p>)}</div>{/* 网站 */}<div style={{marginBottom:'15px'}}><label htmlFor="website">个人网站</label><inputtype="url"id="website"value={fields.website.value}onChange={(e)=>setFieldValue('website',e.target.value)}onBlur={()=>handleFieldBlur('website')}placeholder="https://example.com"style={{width:'100%',padding:'8px',border:fields.website.error?'1px solid red':'1px solid #ccc',borderRadius:'4px'}}/>{fields.website.touched&&fields.website.error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{fields.website.error}</p>)}</div>{/* 个人简介 */}<div style={{marginBottom:'15px'}}><label htmlFor="bio">个人简介</label><textarea id="bio"value={fields.bio.value}onChange={(e)=>setFieldValue('bio',e.target.value)}onBlur={()=>handleFieldBlur('bio')}rows={4}style={{width:'100%',padding:'8px',border:fields.bio.error?'1px solid red':'1px solid #ccc',borderRadius:'4px',resize:'vertical'}}/>{fields.bio.touched&&fields.bio.error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{fields.bio.error}</p>)}<small style={{color:'#666'}}>{fields.bio.value.length}/500字符</small></div>{/* 服务条款 */}<div style={{marginBottom:'20px'}}><label style={{display:'flex',alignItems:'center'}}><inputtype="checkbox"checked={fields.terms.value}onChange={(e)=>setFieldValue('terms',e.target.checked)}onBlur={()=>handleFieldBlur('terms')}style={{marginRight:'8px'}}/>我同意服务条款和隐私政策*</label>{fields.terms.touched&&fields.terms.error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{fields.terms.error}</p>)}</div>{/* 提交按钮 */}<div style={{display:'flex',gap:'10px'}}><buttontype="submit"disabled={formState.isSubmitting}style={{padding:'12px 24px',backgroundColor:formState.isSubmitting?'#ccc':'#007bff',color:'white',border:'none',borderRadius:'4px',cursor:formState.isSubmitting?'not-allowed':'pointer',fontSize:'16px'}}>{formState.isSubmitting?'注册中...':'注册'}</button><buttontype="button"onClick={resetForm}style={{padding:'12px 24px',backgroundColor:'#6c757d',color:'white',border:'none',borderRadius:'4px',cursor:'pointer',fontSize:'16px'}}>重置</button></div>{formState.submitCount>0&&!formState.isValid&&(<p style={{color:'red',marginTop:'10px'}}>请修正表单中的错误后再提交</p>)}</form></div>);};exportdefaultRegistrationForm;

🔧 受控与非受控组件

🎯 组件控制模式对比

🎛️ 受控组件完整实现

importReact,{useState,useEffect,useCallback}from'react';// 📝 受控输入组件interfaceControlledInputProps{value:string;onChange:(value:string)=>void;label?:string;placeholder?:string;type?:'text'|'email'|'password'|'number';error?:string;disabled?:boolean;required?:boolean;maxLength?:number;pattern?:string;autoComplete?:string;className?:string;style?:React.CSSProperties;}constControlledInput:React.FC<ControlledInputProps>=({value,onChange,label,placeholder,type='text',error,disabled=false,required=false,maxLength,pattern,autoComplete,className='',style})=>{consthandleChange=useCallback((e:React.ChangeEvent<HTMLInputElement>)=>{constnewValue=e.target.value;// 处理数字类型输入if(type==='number'){constnumericValue=newValue.replace(/[^0-9.-]/g,'');if(numericValue!==newValue){e.preventDefault();return;}onChange(numericValue);return;}// 应用maxLength限制if(maxLength&&newValue.length>maxLength){return;}onChange(newValue);},[onChange,type,maxLength]);consthandleBlur=useCallback((e:React.FocusEvent<HTMLInputElement>)=>{// 去除前后空格consttrimmedValue=e.target.value.trim();if(trimmedValue!==value){onChange(trimmedValue);}},[onChange,value]);constinputId=`input-${label?.replace(/\s+/g,'-').toLowerCase()||Math.random()}`;return(<div className={`controlled-input${className}`}style={style}>{label&&(<label htmlFor={inputId}style={{display:'block',marginBottom:'5px',fontWeight:'bold',color:error?'red':'#333'}}>{label}{required&&<span style={{color:'red'}}>*</span>}</label>)}<inputtype={type}id={inputId}value={value}onChange={handleChange}onBlur={handleBlur}placeholder={placeholder}disabled={disabled}required={required}pattern={pattern}autoComplete={autoComplete}style={{width:'100%',padding:'10px',border:error?'2px solid red':'1px solid #ddd',borderRadius:'4px',fontSize:'16px',backgroundColor:disabled?'#f5f5f5':'white',outline:'none',transition:'border-color 0.3s ease',...(error&&{boxShadow:'0 0 0 3px rgba(255, 0, 0, 0.1)'})}}onFocus={(e)=>{e.target.style.borderColor=error?'red':'#007bff';}}onKeyPress={(e)=>{// 处理Enter键if(e.key==='Enter'){e.currentTarget.blur();}}}/>{error&&(<div style={{color:'red',fontSize:'14px',marginTop:'5px',display:'flex',alignItems:'center',gap:'5px'}}><span>⚠️</span><span>{error}</span></div>)}{maxLength&&(<div style={{color:'#666',fontSize:'12px',marginTop:'5px',textAlign:'right'}}>{value.length}/{maxLength}</div>)}</div>);};// 📝 受控文本域组件interfaceControlledTextareaProps{value:string;onChange:(value:string)=>void;label?:string;placeholder?:string;rows?:number;error?:string;disabled?:boolean;required?:boolean;maxLength?:number;resize?:'none'|'vertical'|'horizontal'|'both';className?:string;style?:React.CSSProperties;}constControlledTextarea:React.FC<ControlledTextareaProps>=({value,onChange,label,placeholder,rows=4,error,disabled=false,required=false,maxLength,resize='vertical',className='',style})=>{consthandleChange=useCallback((e:React.ChangeEvent<HTMLTextAreaElement>)=>{constnewValue=e.target.value;// 应用maxLength限制if(maxLength&&newValue.length>maxLength){return;}onChange(newValue);},[onChange,maxLength]);// 🔄 自动调整高度consttextareaRef=React.useRef<HTMLTextAreaElement>(null);useEffect(()=>{if(textareaRef.current&&resize==='vertical'){textareaRef.current.style.height='auto';textareaRef.current.style.height=`${textareaRef.current.scrollHeight}px`;}},[value,resize]);consttextareaId=`textarea-${label?.replace(/\s+/g,'-').toLowerCase()||Math.random()}`;return(<div className={`controlled-textarea${className}`}style={style}>{label&&(<label htmlFor={textareaId}style={{display:'block',marginBottom:'5px',fontWeight:'bold',color:error?'red':'#333'}}>{label}{required&&<span style={{color:'red'}}>*</span>}</label>)}<textarea ref={textareaRef}id={textareaId}value={value}onChange={handleChange}placeholder={placeholder}rows={rows}disabled={disabled}required={required}style={{width:'100%',padding:'10px',border:error?'2px solid red':'1px solid #ddd',borderRadius:'4px',fontSize:'16px',fontFamily:'inherit',backgroundColor:disabled?'#f5f5f5':'white',outline:'none',transition:'border-color 0.3s ease',resize,overflow:'hidden',...(error&&{boxShadow:'0 0 0 3px rgba(255, 0, 0, 0.1)'})}}onFocus={(e)=>{e.target.style.borderColor=error?'red':'#007bff';}}/>{error&&(<div style={{color:'red',fontSize:'14px',marginTop:'5px',display:'flex',alignItems:'center',gap:'5px'}}><span>⚠️</span><span>{error}</span></div>)}{maxLength&&(<div style={{color:'#666',fontSize:'12px',marginTop:'5px',textAlign:'right'}}>{value.length}/{maxLength}</div>)}</div>);};// 🎛️ 受控选择组件interfaceControlledSelectProps{value:string|number;onChange:(value:string|number)=>void;options:Array<{value:string|number;label:string;disabled?:boolean;}>;label?:string;placeholder?:string;error?:string;disabled?:boolean;required?:boolean;className?:string;style?:React.CSSProperties;}constControlledSelect:React.FC<ControlledSelectProps>=({value,onChange,options,label,placeholder,error,disabled=false,required=false,className='',style})=>{consthandleChange=useCallback((e:React.ChangeEvent<HTMLSelectElement>)=>{constnewValue=e.target.value;// 处理数字类型if(options.some(opt=>typeofopt.value==='number')){onChange(parseInt(newValue));}else{onChange(newValue);}},[onChange,options]);constselectId=`select-${label?.replace(/\s+/g,'-').toLowerCase()||Math.random()}`;return(<div className={`controlled-select${className}`}style={style}>{label&&(<label htmlFor={selectId}style={{display:'block',marginBottom:'5px',fontWeight:'bold',color:error?'red':'#333'}}>{label}{required&&<span style={{color:'red'}}>*</span>}</label>)}<select id={selectId}value={value}onChange={handleChange}disabled={disabled}required={required}style={{width:'100%',padding:'10px',border:error?'2px solid red':'1px solid #ddd',borderRadius:'4px',fontSize:'16px',backgroundColor:disabled?'#f5f5f5':'white',outline:'none',transition:'border-color 0.3s ease',cursor:disabled?'not-allowed':'pointer',...(error&&{boxShadow:'0 0 0 3px rgba(255, 0, 0, 0.1)'})}}>{placeholder&&(<option value=""disabled>{placeholder}</option>)}{options.map(option=>(<option key={option.value}value={option.value.toString()}disabled={option.disabled}>{option.label}</option>))}</select>{error&&(<div style={{color:'red',fontSize:'14px',marginTop:'5px',display:'flex',alignItems:'center',gap:'5px'}}><span>⚠️</span><span>{error}</span></div>)}</div>);};// 💡 受控组件使用示例constControlledComponentsExample:React.FC=()=>{const[formData,setFormData]=useState({username:'',email:'',age:'',city:'',bio:'',newsletter:true});const[errors,setErrors]=useState<Record<string,string>>({});consthandleInputChange=useCallback((field:string,value:string|boolean)=>{setFormData(prev=>({...prev,[field]:value}));// 清除对应字段错误if(errors[field]){setErrors(prev=>{constnewErrors={...prev};deletenewErrors[field];returnnewErrors;});}},[errors]);consthandleSubmit=useCallback((e:React.FormEvent)=>{e.preventDefault();// 简单验证constnewErrors:Record<string,string>={};if(!formData.username.trim()){newErrors.username='用户名不能为空';}elseif(formData.username.length<3){newErrors.username='用户名至少3个字符';}if(!formData.email.trim()){newErrors.email='邮箱不能为空';}elseif(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)){newErrors.email='邮箱格式不正确';}if(!formData.age){newErrors.age='请选择年龄';}if(Object.keys(newErrors).length>0){setErrors(newErrors);return;}console.log('表单提交:',formData);alert('表单提交成功！');},[formData]);return(<div style={{maxWidth:'600px',margin:'0 auto',padding:'20px'}}><h2>受控组件示例</h2><form onSubmit={handleSubmit}><ControlledInput label="用户名"value={formData.username}onChange={(value)=>handleInputChange('username',value)}placeholder="请输入用户名"error={errors.username}required minLength={3}maxLength={20}/><ControlledInput label="邮箱"type="email"value={formData.email}onChange={(value)=>handleInputChange('email',value)}placeholder="请输入邮箱地址"error={errors.email}required/><ControlledInput label="年龄"type="number"value={formData.age}onChange={(value)=>handleInputChange('age',value)}error={errors.age}required/><ControlledSelect label="城市"value={formData.city}onChange={(value)=>handleInputChange('city',value)}placeholder="请选择城市"error={errors.city}options={[{value:'',label:'请选择'},{value:'beijing',label:'北京'},{value:'shanghai',label:'上海'},{value:'guangzhou',label:'广州'},{value:'shenzhen',label:'深圳'}]}required/><ControlledTextarea label="个人简介"value={formData.bio}onChange={(value)=>handleInputChange('bio',value)}placeholder="请输入个人简介"rows={4}maxLength={200}/><div style={{marginBottom:'20px'}}><label style={{display:'flex',alignItems:'center',gap:'8px'}}><inputtype="checkbox"checked={formData.newsletter}onChange={(e)=>handleInputChange('newsletter',e.target.checked)}style={{cursor:'pointer'}}/>订阅邮件通知</label></div><div style={{display:'flex',gap:'10px'}}><buttontype="submit"style={{padding:'12px 24px',backgroundColor:'#007bff',color:'white',border:'none',borderRadius:'4px',cursor:'pointer',fontSize:'16px'}}>提交</button><buttontype="button"onClick={()=>{setFormData({username:'',email:'',age:'',city:'',bio:'',newsletter:true});setErrors({});}}style={{padding:'12px 24px',backgroundColor:'#6c757d',color:'white',border:'none',borderRadius:'4px',cursor:'pointer',fontSize:'16px'}}>重置</button></div></form><div style={{marginTop:'30px',padding:'20px',backgroundColor:'#f8f9fa',borderRadius:'8px'}}><h3>当前表单状态</h3><pre style={{fontSize:'14px',overflow:'auto'}}>{JSON.stringify(formData,null,2)}</pre></div></div>);};### 🔄 非受控组件实现```typescript import React, { useRef, useEffect, useState, useCallback } from 'react'; // 🔄 非受控输入组件 interface UncontrolledInputProps { name: string; label?: string; type?: 'text' | 'email' | 'password' | 'number'; placeholder?: string; defaultValue?: string; required?: boolean; maxLength?: number; pattern?: string; className?: string; style?: React.CSSProperties; onChange?: (value: string) => void; onBlur?: (value: string) => void; } const UncontrolledInput: React.FC<UncontrolledInputProps> = ({ name, label, type = 'text', placeholder, defaultValue = '', required = false, maxLength, pattern, className = '', style, onChange, onBlur }) => { const inputRef = useRef<HTMLInputElement>(null); const [isFocused, setIsFocused] = useState(false); // 🎯 获取输入值的方法 const getValue = useCallback((): string => { return inputRef.current?.value || ''; }, []); // 🔄 设置输入值的方法 const setValue = useCallback((value: string) => { if (inputRef.current) { inputRef.current.value = value; } }, []); // 🎯 清空输入的方法 const clear = useCallback(() => { if (inputRef.current) { inputRef.current.value = ''; } }, []); // 🖱️ 聚焦方法 const focus = useCallback(() => { inputRef.current?.focus(); }, []); // 📏 选择所有文本 const selectAll = useCallback(() => { inputRef.current?.select(); }, []); // 🔄 值变化处理 const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { onChange?.(e.target.value); }, [onChange]); // 🖱️ 失焦处理 const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => { setIsFocused(false); onBlur?.(e.target.value); }, [onBlur]); // 🎯 聚焦处理 const handleFocus = useCallback(() => { setIsFocused(true); }, []); // 🔧 暴露方法到ref React.useImperativeHandle(React.createRef(), () => ({ getValue, setValue, clear, focus, selectAll }), [getValue, setValue, clear, focus, selectAll]); return ( <div className={`uncontrolled-input ${className}`} style={style}> {label && ( <label htmlFor={name} style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: '#333' }} > {label} {required && <span style={{ color: 'red' }}>*</span>} </label> )} <input ref={inputRef} type={type} id={name} name={name} defaultValue={defaultValue} placeholder={placeholder} required={required} maxLength={maxLength} pattern={pattern} onChange={handleChange} onBlur={handleBlur} onFocus={handleFocus} style={{ width: '100%', padding: '10px', border: isFocused ? '2px solid #007bff' : '1px solid #ddd', borderRadius: '4px', fontSize: '16px', outline: 'none', transition: 'border-color 0.3s ease' }} /> </div> ); }; // 📝 非受控表单组件 interface FormData { username: string; email: string; password: string; age: string; city: string; bio: string; } const UncontrolledForm: React.FC = () => { const usernameRef = useRef<HTMLInputElement>(null); const emailRef = useRef<HTMLInputElement>(null); const passwordRef = useRef<HTMLInputElement>(null); const ageRef = useRef<HTMLInputElement>(null); const cityRef = useRef<HTMLSelectElement>(null); const bioRef = useRef<HTMLTextAreaElement>(null); const [errors, setErrors] = useState<Partial<Record<keyof FormData, string>>>({}); const [isSubmitting, setIsSubmitting] = useState(false); // 📊 获取所有表单数据 const getFormData = useCallback((): FormData => { return { username: usernameRef.current?.value || '', email: emailRef.current?.value || '', password: passwordRef.current?.value || '', age: ageRef.current?.value || '', city: cityRef.current?.value || '', bio: bioRef.current?.value || '' }; }, []); // 🔍 验证表单 const validateForm = useCallback((data: FormData): boolean => { const newErrors: Partial<Record<keyof FormData, string>> = {}; if (!data.username.trim()) { newErrors.username = '用户名不能为空'; } else if (data.username.length < 3) { newErrors.username = '用户名至少3个字符'; } if (!data.email.trim()) { newErrors.email = '邮箱不能为空'; } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) { newErrors.email = '邮箱格式不正确'; } if (!data.password) { newErrors.password = '密码不能为空'; } else if (data.password.length < 6) { newErrors.password = '密码至少6个字符'; } if (!data.age) { newErrors.age = '请选择年龄'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }, []); // 📤 提交表单 const handleSubmit = useCallback(async (e: React.FormEvent) => { e.preventDefault(); const formData = getFormData(); const isValid = validateForm(formData); if (!isValid) { return; } setIsSubmitting(true); try { // 模拟API调用 await new Promise(resolve => setTimeout(resolve, 2000)); console.log('提交的数据:', formData); alert('表单提交成功！'); // 清空表单 usernameRef.current!.value = ''; emailRef.current!.value = ''; passwordRef.current!.value = ''; ageRef.current!.value = ''; cityRef.current!.value = ''; bioRef.current!.value = ''; setErrors({}); } catch (error) { console.error('提交失败:', error); alert('提交失败，请重试'); } finally { setIsSubmitting(false); } }, [getFormData, validateForm]); // 🔄 重置表单 const resetForm = useCallback(() => { usernameRef.current!.value = ''; emailRef.current!.value = ''; passwordRef.current!.value = ''; ageRef.current!.value = ''; cityRef.current!.value = ''; bioRef.current!.value = ''; setErrors({}); }, []); // 📊 显示表单数据 const showFormData = useCallback(() => { const data = getFormData(); alert('当前表单数据：\n' + JSON.stringify(data, null, 2)); }, [getFormData]); return ( <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}> <h2>非受控组件表单</h2> <form onSubmit={handleSubmit}> {/* 用户名 */} <div style={{ marginBottom: '15px' }}> <UncontrolledInput name="username" label="用户名" ref={usernameRef} placeholder="请输入用户名" required minLength={3} maxLength={20} /> {errors.username && ( <p style={{ color: 'red', fontSize: '14px', margin: '5px 0' }}> {errors.username} </p> )} </div> {/* 邮箱 */} <div style={{ marginBottom: '15px' }}> <UncontrolledInput name="email" type="email" label="邮箱" ref={emailRef} placeholder="请输入邮箱地址" required /> {errors.email && ( <p style={{ color: 'red', fontSize: '14px', margin: '5px 0' }}> {errors.email} </p> )} </div> {/* 密码 */} <div style={{ marginBottom: '15px' }}> <UncontrolledInput name="password" type="password" label="密码" ref={passwordRef} placeholder="请输入密码" required /> {errors.password && ( <p style={{ color: 'red', fontSize: '14px', margin: '5px 0' }}> {errors.password} </p> )} </div> {/* 年龄 */} <div style={{ marginBottom: '15px' }}> <UncontrolledInput name="age" type="number" label="年龄" ref={ageRef} placeholder="请输入年龄" required min="18" max="120" /> {errors.age && ( <p style={{ color: 'red', fontSize: '14px', margin: '5px 0' }}> {errors.age} </p> )} </div> {/* 城市 */} <div style={{ marginBottom: '15px' }}> <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}> 城市 <span style={{ color: 'red' }}>*</span> </label> <select ref={cityRef} name="city" style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px' }} required > <option value="">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> </div> {/* 个人简介 */} <div style={{ marginBottom: '15px' }}> <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}> 个人简介 </label> <textarea ref={bioRef} name="bio" placeholder="请输入个人简介" rows={4} maxLength={200} style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px', resize: 'vertical' }} /> </div> {/* 提交按钮 */} <div style={{ display: 'flex', gap: '10px', marginBottom: '15px' }}> <button type="submit" disabled={isSubmitting} style={{ padding: '12px 24px', backgroundColor: isSubmitting ? '#ccc' : '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: isSubmitting ? 'not-allowed' : 'pointer', fontSize: '16px' }} > {isSubmitting ? '提交中...' : '提交'} </button> <button type="button" onClick={resetForm} style={{ padding: '12px 24px', backgroundColor: '#6c757d', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '16px' }} > 重置 </button> <button type="button" onClick={showFormData} style={{ padding: '12px 24px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '16px' }} > 查看数据 </button> </div> </form> </div> ); }; --- ## 🎯 实战案例与最佳实践 ### 🏗️ 综合表单管理系统```typescriptimportReact,{useState,useCallback,useRef}from'react';// 📊 表单字段类型定义interfaceFormFieldConfig{name:string;type:'text'|'email'|'password'|'number'|'select'|'textarea'|'checkbox'|'radio';label:string;placeholder?:string;required?:boolean;defaultValue?:any;options?:Array<{value:string;label:string}>;validation?:{minLength?:number;maxLength?:number;min?:number;max?:number;pattern?:RegExp;custom?:(value:any)=>string|null;};conditional?:{field:string;value:any;action:'show'|'hide';};}// 🎯 动态表单组件constDynamicForm:React.FC<{config:FormFieldConfig[];onSubmit:(data:Record<string,any>)=>Promise<void>;className?:string;style?:React.CSSProperties;}>=({config,onSubmit,className='',style})=>{const[formData,setFormData]=useState<Record<string,any>>(()=>{constinitial:Record<string,any>={};config.forEach(field=>{initial[field.name]=field.defaultValue||(field.type==='checkbox'?false:'');});returninitial;});const[errors,setErrors]=useState<Record<string,string>>({});const[touched,setTouched]=useState<Record<string,boolean>>({});const[isSubmitting,setIsSubmitting]=useState(false);constformRef=useRef<HTMLFormElement>(null);// 🔍 验证单个字段constvalidateField=useCallback((field:FormFieldConfig,value:any):string|null=>{const{validation,label,required}=field;// 必填验证if(required&&(!value||(typeofvalue==='string'&&value.trim()===''))){return`${label}为必填项`;}// 如果值为空且不是必填，跳过其他验证if(!value)returnnull;if(validation){const{minLength,maxLength,min,max,pattern,custom}=validation;if(typeofvalue==='string'){if(minLength&&value.length<minLength){return`${label}至少需要${minLength}个字符`;}if(maxLength&&value.length>maxLength){return`${label}最多允许${maxLength}个字符`;}if(pattern&&!pattern.test(value)){return`${label}格式不正确`;}}if(typeofvalue==='number'){if(min!==undefined&&value<min){return`${label}不能小于${min}`;}if(max!==undefined&&value>max){return`${label}不能大于${max}`;}}if(custom){returncustom(value);}}returnnull;},[]);// 🔄 验证整个表单constvalidateForm=useCallback(():boolean=>{constnewErrors:Record<string,string>={};letisValid=true;config.forEach(field=>{// 检查字段是否应该被验证（考虑条件显示）if(field.conditional){constconditionField=formData[field.conditional.field];constshouldShow=field.conditional.action==='show'?conditionField===field.conditional.value:conditionField!==field.conditional.value;if(!shouldShow)return;}consterror=validateField(field,formData[field.name]);if(error){newErrors[field.name]=error;isValid=false;}});setErrors(newErrors);// 设置所有字段为已触碰constnewTouched:Record<string,boolean>={};config.forEach(field=>{newTouched[field.name]=true;});setTouched(newTouched);returnisValid;},[config,formData,validateField]);// 🔄 处理字段值变化consthandleFieldChange=useCallback((fieldName:string,value:any)=>{setFormData(prev=>({...prev,[fieldName]:value}));// 清除该字段错误（如果已经触碰）if(touched[fieldName]){constfield=config.find(f=>f.name===fieldName);if(field){consterror=validateField(field,value);setErrors(prev=>({...prev,[fieldName]:error||''}));}}},[touched,config,validateField]);// 🖱️ 处理字段失焦consthandleFieldBlur=useCallback((fieldName:string)=>{setTouched(prev=>({...prev,[fieldName]:true}));constfield=config.find(f=>f.name===fieldName);if(field){consterror=validateField(field,formData[fieldName]);setErrors(prev=>({...prev,[fieldName]:error||''}));}},[config,formData,validateField]);// 📤 提交表单consthandleSubmit=useCallback(async(e:React.FormEvent)=>{e.preventDefault();if(!validateForm()){return;}setIsSubmitting(true);try{awaitonSubmit(formData);}catch(error){console.error('表单提交失败:',error);}finally{setIsSubmitting(false);}},[formData,validateForm,onSubmit]);// 🔄 判断字段是否应该显示constshouldShowField=useCallback((field:FormFieldConfig):boolean=>{if(!field.conditional)returntrue;constconditionValue=formData[field.conditional.field];returnfield.conditional.action==='show'?conditionValue===field.conditional.value:conditionValue!==field.conditional.value;},[formData]);// 🎨 渲染字段constrenderField=useCallback((field:FormFieldConfig)=>{if(!shouldShowField(field))returnnull;constvalue=formData[field.name];consterror=touched[field.name]?errors[field.name]:'';constcommonProps={id:field.name,name:field.name,value,onChange:(e:React.ChangeEvent<HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement>)=>{consttargetValue=field.type==='checkbox'?(e.targetasHTMLInputElement).checked:(e.targetasHTMLInputElement).value;handleFieldChange(field.name,targetValue);},onBlur:()=>handleFieldBlur(field.name),required:field.required,style:{width:'100%',padding:'10px',border:error?'2px solid red':'1px solid #ddd',borderRadius:'4px',fontSize:'16px',outline:'none'}};return(<div key={field.name}style={{marginBottom:'15px'}}><label htmlFor={field.name}style={{display:'block',marginBottom:'5px',fontWeight:'bold',color:error?'red':'#333'}}>{field.label}{field.required&&<span style={{color:'red'}}>*</span>}</label>{field.type==='select'?(<select{...commonProps}><option value="">{field.placeholder||'请选择'}</option>{field.options?.map(option=>(<option key={option.value}value={option.value}>{option.label}</option>))}</select>):field.type==='textarea'?(<textarea{...commonProps}rows={4}placeholder={field.placeholder}/>):field.type==='checkbox'?(<div style={{display:'flex',alignItems:'center'}}><input{...commonProps}type="checkbox"checked={value}style={{width:'auto',marginRight:'8px'}}/><span>{field.label}</span></div>):(<input{...commonProps}type={field.type}placeholder={field.placeholder}min={field.validation?.min}max={field.validation?.max}maxLength={field.validation?.maxLength}/>)}{error&&(<p style={{color:'red',fontSize:'14px',margin:'5px 0'}}>{error}</p>)}</div>);},[formData,errors,touched,shouldShowField,handleFieldChange,handleFieldBlur]);return(<form ref={formRef}onSubmit={handleSubmit}className={className}style={style}>{config.map(renderField)}<div style={{display:'flex',gap:'10px',marginTop:'20px'}}><buttontype="submit"disabled={isSubmitting}style={{padding:'12px 24px',backgroundColor:isSubmitting?'#ccc':'#007bff',color:'white',border:'none',borderRadius:'4px',cursor:isSubmitting?'not-allowed':'pointer',fontSize:'16px'}}>{isSubmitting?'提交中...':'提交'}</button><buttontype="button"onClick={()=>{constreset:Record<string,any>={};config.forEach(field=>{reset[field.name]=field.defaultValue||(field.type==='checkbox'?false:'');});setFormData(reset);setErrors({});setTouched({});}}style={{padding:'12px 24px',backgroundColor:'#6c757d',color:'white',border:'none',borderRadius:'4px',cursor:'pointer',fontSize:'16px'}}>重置</button></div></form>);};// 💡 动态表单使用示例constDynamicFormExample:React.FC=()=>{const[formData,setFormData]=useState<Record<string,any>>({});constformConfig:FormFieldConfig[]=[{name:'userType',type:'select',label:'用户类型',required:true,options:[{value:'personal',label:'个人用户'},{value:'business',label:'企业用户'}]},{name:'username',type:'text',label:'用户名',placeholder:'请输入用户名',required:true,validation:{minLength:3,maxLength:20,pattern:/^[a-zA-Z0-9_]+$/,custom:(value:string)=>{if(value.includes('admin')){return'用户名不能包含敏感词';}returnnull;}}},{name:'email',type:'email',label:'邮箱地址',placeholder:'请输入邮箱地址',required:true,validation:{custom:(value:string)=>{constemailRegex=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;if(!emailRegex.test(value)){return'请输入有效的邮箱地址';}returnnull;}}},{name:'companyName',type:'text',label:'公司名称',placeholder:'请输入公司名称',required:true,conditional:{field:'userType',value:'business',action:'show'}},{name:'companyScale',type:'select',label:'公司规模',required:true,options:[{value:'1-10',label:'1-10人'},{value:'11-50',label:'11-50人'},{value:'51-200',label:'51-200人'},{value:'200+',label:'200人以上'}],conditional:{field:'userType',value:'business',action:'show'}},{name:'age',type:'number',label:'年龄',placeholder:'请输入年龄',required:true,validation:{min:18,max:120}},{name:'interests',type:'checkbox',label:'接收产品更新通知',defaultValue:true},{name:'bio',type:'textarea',label:'个人简介',placeholder:'请简单介绍一下自己',validation:{maxLength:200,custom:(value:string)=>{if(value&&value.length<10){return'个人简介至少需要10个字符';}returnnull;}}}];consthandleSubmit=async(data:Record<string,any>)=>{console.log('动态表单提交:',data);setFormData(data);// 模拟API调用awaitnewPromise(resolve=>setTimeout(resolve,2000));alert('注册成功！');};return(<div style={{maxWidth:'600px',margin:'0 auto',padding:'20px'}}><h2>动态表单系统</h2><p>支持条件显示、动态验证、多种字段类型</p><DynamicForm config={formConfig}onSubmit={handleSubmit}style={{marginBottom:'30px'}}/>{Object.keys(formData).length>0&&(<div style={{padding:'20px',backgroundColor:'#f8f9fa',borderRadius:'8px',border:'1px solid #dee2e6'}}><h3>提交的数据</h3><pre style={{fontSize:'14px',overflow:'auto'}}>{JSON.stringify(formData,null,2)}</pre></div>)}</div>);};export{UncontrolledInput,UncontrolledForm,DynamicForm,DynamicFormExample};