分享react后台管理系统常见的组件/知识点

前言

虽然各个前端框架的常用组件库已经非常完善，但做具体业务时，一般情况下，我们无法直接套用组件，需要自己进行撰写对应业务逻辑。

这篇文章总结做react表单列表常见的组件/知识点。

注意：本篇仅提供相关功能的核心逻辑或关键代码。

一、准备工作

本篇介绍的是关于react和组件库ant design的知识点/代码。请自行下载安装对应工具。

接下来正式进入知识点/代码介绍。

二、常用知识点

1、日期选择框

1.1、开发中常见的问题

数据赋值问题
格式转换格式

数据赋值，常见的有两种数据定义方式

const [form] = Form.useForm()：用于获取 antd 表单实例，借助此实例能对表单数据进行操作，如设置值、获取值、校验等，是专门针对表单功能的操作工具。
const [inputUploadForm, setInputUploadForm] = useState({})：是使用 React 的 useState Hook 来创建一个状态变量 inputUploadForm 及其更新函数 setInputUploadForm，用于管理普通数据状态，可处理任意类型的数据，不限于表单数据。

格式转换也就是string<->moment相互转换

1.2、单选日期

组件代码

<DatePicker
    allowClear
    disabled={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

<RangePicker
    allowClear
    disabled={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 
    allowClear
    onChange={(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 
    allowClear
    placeholder="请选择"
    onChange={(value)=>{
        console.log("选择了上传状态>>>",value);
        setInputForm((prevParams) => ({...prevParams,uploadStatus:value}))}}
    options={[
        {
        value: "1",
        label: "已上传",
        },
        {
        value: "2",
        label: "未上传",
        },
    ]}
    >
</Select>