react【实战】自定义下拉框、单选、多选、输入框

效果预览完整代码import{FiChevronDown,FiCheck}fromreact-icons/fi;import{useState}fromreact;functionCustomSelect(){const[selected,setSelected]useState();const[isOpen,setIsOpen]useState(false);constoptions[{value:apple,label:苹果},{value:banana,label:香蕉},{value:orange,label:橙子},];return(div classNamerelative w-52div className{border border-gray-300 rounded-lg px-4 py-2 cursor-pointer flex items-center justify-between transition-all duration-200 text-sm${isOpen?border-blue-500 ring-2 ring-blue-500:hover:border-gray-400}}onClick{()setIsOpen(!isOpen)}span className{selected?text-black:text-gray-400}{selected?options.find((opt)opt.valueselected)?.label:请选择水果}/spanFiChevronDown size{16}className{text-gray-500 transition-transform duration-200${isOpen?rotate-180:}}//div{isOpen(div classNameabsolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-10 overflow-hidden{options.map((option)(div key{option.value}className{px-4 py-2 cursor-pointer transition-colors duration-150 text-sm${selectedoption.value?bg-blue-50 text-blue-600:hover:bg-gray-50 text-gray-700}}onClick{(e){e.stopPropagation();setSelected(option.value);setIsOpen(false);}}{option.label}/div))}/div)}/div);}functionCustomCheckbox(){const[checked,setChecked]useState(false);return(label classNameflex items-center gap-2 cursor-pointerdiv classNamerelativeinput typecheckboxclassNamesr-onlychecked{checked}onChange{()setChecked(!checked)}/div className{w-4 h-4 rounded border-2 transition-all duration-200 flex items-center justify-center${checked?bg-blue-500 border-blue-500:border-gray-300 bg-white}}{checkedFiCheck size{10}classNametext-white/}/div/divspan classNametext-gray-700 text-sm同意协议/span/label);}functionCustomRadio(){const[selected,setSelected]useState();constoptions[{value:option1,label:选项一},{value:option2,label:选项二},{value:option3,label:选项三},];return(div classNameflex flex-col gap-2{options.map((option)(label key{option.value}classNameflex items-center gap-2 cursor-pointerdiv classNamerelativeinput typeradioclassNamesr-onlynamecustom-radio-groupchecked{selectedoption.value}onChange{()setSelected(option.value)}/div className{w-4 h-4 rounded-full border-2 transition-all duration-200${selectedoption.value?border-blue-500:border-gray-300}}{selectedoption.value(div classNameabsolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-blue-500/)}/div/divspan classNametext-gray-700 text-sm{option.label}/span/label))}/div);}functionCustomInput(){const[value,setValue]useState();return(div classNamew-52input typetextvalue{value}onChange{(e)setValue(e.target.value)}placeholder请输入内容classNamew-full px-4py-1.5bg-gray-50border-0rounded-lg text-sm focus:outline-none focus:ring-2focus:ring-blue-500focus:bg-white placeholder:text-gray-400transition-all duration-200//div);}functionFormExamples(){const[nativeSelect,setNativeSelect]useState();const[nativeCheckbox,setNativeCheckbox]useState(false);const[nativeRadio,setNativeRadio]useState();const[nativeInput,setNativeInput]useState();return(div classNamepy-8 px-4h2 classNametext-2xl font-bold mb-8 text-center表单组件对比/h2div classNameflex justify-centertable classNameborder-collapsetheadtrth classNametext-left p-4 w-32 text-gray-600 font-medium border-b border-gray-200组件类型/thth classNametext-center p-4 w-64 text-red-500 font-semibold border-b border-gray-200原生效果/thth classNametext-center p-4 w-64 text-green-500 font-semibold border-b border-gray-200自定义效果/th/tr/theadtbody{/* 下拉框对比 */}tr classNamehover:bg-gray-50td classNamep-4 text-gray-700 font-medium border-b border-gray-100下拉框/tdtd classNamep-4 text-center border-b border-gray-100select value{nativeSelect}onChange{(e)setNativeSelect(e.target.value)}classNameborder border-gray-300 px-3 py-1.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500option value请选择/optionoption valueapple苹果/optionoption valuebanana香蕉/optionoption valueorange橙子/option/select/tdtd classNamep-4 text-center border-b border-gray-100CustomSelect//td/tr{/* 复选框对比 */}tr classNamehover:bg-gray-50td classNamep-4 text-gray-700 font-medium border-b border-gray-100复选框/tdtd classNamep-4 text-center border-b border-gray-100label classNameflex items-center justify-center gap-2 cursor-pointerinput typecheckboxchecked{nativeCheckbox}onChange{()setNativeCheckbox(!nativeCheckbox)}classNamew-4 h-4/span classNametext-gray-700 text-sm同意协议/span/label/tdtd classNamep-4 text-center border-b border-gray-100CustomCheckbox//td/tr{/* 单选框对比 */}tr classNamehover:bg-gray-50td classNamep-4 text-gray-700 font-medium border-b border-gray-100单选框/tdtd classNamep-4 text-center border-b border-gray-100div classNameflex flex-col gap-2 items-center{[选项一,选项二,选项三].map((label,i)(label key{i}classNameflex items-center gap-2 cursor-pointerinput typeradionamenative-radiovalue{label}checked{nativeRadiolabel}onChange{()setNativeRadio(label)}classNamew-4 h-4/span classNametext-gray-700 text-sm{label}/span/label))}/div/tdtd classNamep-4 text-center border-b border-gray-100CustomRadio//td/tr{/* 输入框对比 */}tr classNamehover:bg-gray-50td classNamep-4 text-gray-700 font-medium border-b border-gray-100输入框/tdtd classNamep-4 text-center border-b border-gray-100input typetextvalue{nativeInput}onChange{(e)setNativeInput(e.target.value)}placeholder请输入内容classNamew-52 px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500//tdtd classNamep-4 text-center border-b border-gray-100CustomInput//td/tr/tbody/table/div/div);}functionApp(){returnFormExamples/;}exportdefaultApp;