前言
虽然各个前端框架的常用组件库已经非常完善，但做具体业务时，一般情况下，我们无法直接套用组件，需要自己进行撰写对应业务逻辑。
这篇文章总结做react表单列表常见的组件/知识点。
注意：本篇仅提供相关功能的核心逻辑或关键代码。
一、准备工作
本篇介绍的是关于react和组件库ant design的知识点/代码。请自行下载安装对应工具。
接下来正式进入知识点/代码介绍。
二、常用知识点
1、日期选择框
1.1、开发中常见的问题
- 数据赋值问题
- 格式转换格式
数据赋值，常见的有两种数据定义方式
const [form] = Form.useForm()：用于获取antd表单实例，借助此实例能对表单数据进行操作，如设置值、获取值、校验等，是专门针对表单功能的操作工具。const [inputUploadForm, setInputUploadForm] = useState({})：是使用 React 的useStateHook 来创建一个状态变量inputUploadForm及其更新函数setInputUploadForm，用于管理普通数据状态，可处理任意类型的数据，不限于表单数据。
格式转换也就是string<->moment相互转换
1.2、单选日期
组件代码
<DatePickerallowCleardisabled={listUploadCheck?true:false}onChange={(date,dateString)=>{singleSelectDate(date,dateString)}}format="YYYYMM"picker="month"style={{ width: '100%' }}
/>对应函数方法
const singleSelectDate=(date,dateString)=>{console.log("日期格式>>",date,"字符串格式>>>",dateString,);//（常见就是给Form(const [form] = Form.useForm())和useState定义的数据，如const [inputUploadForm,setInputUploadForm]=useState({})// 赋值 form.setFieldsValue({month:date})setInputUploadForm((prevParams) => ({...prevParams,month:dateString}))}通过修改format属性决定精准到年月日
format="YYYYMMDD" （看后端数据需要，也可以是YYYY-MM-DD 也就是2025-01-01)
picker="day"format="YYYYMM"
picker="month"
format="YYYY"
picker="year"
1.3、起止日期
组件代码
import {DatePicker,
} from "antd";
const { RangePicker } = DatePicker<RangePickerallowCleardisabled={listUploadCheck==true?true:false}format="YYYY-MM-DD"picker="day"onChange={(date,dateString)=>{selectDate(date,dateString)}}style={{ width: '100%' }}
/>对应的函数方法
const selectDate=(date,dateString)=>{//起止，dateString是字符串数组，[0]取到开始时间，[1]取到结束时间//正常赋值date给动态表单console.log("日期格式>>",date,"字符串格式>>>",dateString);//如uploadForm.setFieldsValue({effectiveTime:date})setInputUploadForm((prevParams) => ({...prevParams,startTime:dateString[0],endTime:dateString[1],}))}1.4、格式转换
安装和引入对应的包（用的npm）
//安装
instanll install mement//在页面引入
import moment from "moment";
字符串->moment类型
//如
let stringTime= xx //假设这是一个日期字符串如"2025-01-01"
let momentTime1=moment(stringTime,'YYYY') //moment格式，精准到年
let momentTime2=moment(stringTime,'YYYYMM') //moment格式，精准到月
let momentTime3=moment(stringTime,'YYYYMMDD') //moment格式，精准日moment类型->字符串
//如
let momentTime= xx //假设这是一个精准到日的moment格式
let stringTime1=moment(momentTime,'YYYY') //字符串格式，精准到年, "2025"
let stringTime2=moment(momentTime,'YYYYMM') //字符串格式，精准到月,"202501"
let stringTime3=moment(momentTime,'YYYYMMDD') //字符串格式，精准日,"20250101"2、下拉框数据的遍历渲染
情况1：适用于动态数据的遍历渲染
情况2：适用于静态数据的遍历渲染
2.1、动态数据的渲染（Select+Select.Option ）
这种一般适用于从后端接口获取下拉框数据
组件代码
<Select allowClearonChange={(value)=>{console.log("选择区分了，值为>>>",value);setInputForm((prevState) => ({...prevState,areaCode: value || "",}))}}placeholder="请选择">//对象数组的遍历{areaList.map((item,index)=>{return(<Select.Option value={item.areaCode} key={index} >{item.areaName}</Select.Option>)})}
</Select>对应的数据格式
//假设对象数组长这样
//根据后端返回的数据和字段进行微调。
const [areaList,setAreaList]=useState([
{areaCode:"X001",areaName:"区分1"
},
{areaCode:"X002",areaName:"区分2"
},
{areaCode:"X003",areaName:"区分3"
},
]) 2.2、静态数据的渲染（Select+属性options）
下拉框数据一般是固定不变的，或者数据量极少的
组件代码
<Select allowClearplaceholder="请选择"onChange={(value)=>{console.log("选择了上传状态>>>",value);setInputForm((prevParams) => ({...prevParams,uploadStatus:value}))}}options={[{value: "1",label: "已上传",},{value: "2",label: "未上传",},]}>
</Select>三、小结
本篇总结两个常用知识点，这篇文章会不定期更新，喜欢这篇文章的朋友可以先关注、收藏，及时获取文章最新消息
