react hooks + antd案例：列表的增删改

用户9914333

发布于 2022-12-14 18:15:01

92500

代码可运行

文章被收录于专栏：bug收集bug收集

运行总次数：0

代码可运行

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

今日分享：React hooks + antd UI 实现增删改案例

1. 列表展示

<Table columns={columns} 
dataSource={data} 
rowKey={(record)=>record.admin_no} 
pagination={false} />

columns 列的定义，

dataSource 显示的数据，

rowKey 给Table的每行给唯一的key值( 不加会报错)

pageinition = {false} 将表格Table 自带的分页取消

2. 分页显示

<Pagination
         current={currentPage}
         pageSize={pageSize}
         total={total}
         onChange={handleChangePage}
          />;

current 绑定当前页

pageSize 绑定每页条数

total 绑定总行数

onChange 改变当前页面，执行的方法

3. 删除数据

设置columns时，给删除按钮，添加事件,将传递当前行的id

{
title: '操作',
key: 'action',
render: (_, record) => (
<Space size="middle">
<a onClick={()=>handleDel(record.admin_no)}>删除</a>
<a onClick={()=>handleEdit(record.admin_no)}>修改</a>
</Space>
         ),
       }

注：render函数，第二个参数record，即为当行的数据

4. 添加数据

const [form] = Form.useForm();

使用useForm来操作数据， form.resetFields() 重置数据

const onReset = ()=>{
       form.resetFields();
   }
const onCancel=()=>{
       navigate("/index/role/list")
   }

将Form 与 useForm 绑定

<Form form={form}
      name="FrmAddAdmin"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      onFinish={onFinish}
      autoComplete="off"
      initialValues={{
      state:"1",
      type:"1",
      isDelete:"1"
      }}
>

注：使用了Form.Item 就不能使用defaultValue来初始数据，需要使用Form上的initialValues来初始数据.

表单中，具体的项使用 Form.Item：

<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: '请输入姓名!' }]}>

<Input />
</Form.Item>

<Form.Item
label="类型"
name="type">

<Select
style={{
width: 120 
}}
options={[
{
value: '1',
label: '管理员',
},
{
value: '2',
label: '超级管理员',
 }
]}
/>
</Form.Item>

注：Form.Item中的name值，是表单提交时，传入对象相对应的键名，为当前表单项输入的值。

const onFinish = (values) => {
   // values 通过values即可得到表单输入的值
}

 <Form form={form}
name="FrmAddAdmin"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 16 }}
           onFinish={onFinish}
           autoComplete="off"
           initialValues={{
               state:"1",
type:"1",
               isDelete:"1"
           }}
       >

          <Button type="primary" htmlType="submit">
           添加
         </Button>

5. 修改数据

使用useForm 与 Form 关联


const [form] = Form.useForm();
<Form form={form}
      name="FrmUpdateAdmin"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      onFinish={onFinish}
      autoComplete="off"
      initialValues={{
      state:"1",
      type:"1",
      isDelete:"1"
}}
>

加载组件时，使用form.setFieldsValue 显示对应的值

useEffect(()=>{
    getAdminInfoById(id).then(data=>{
        if(data.code == 200){
          form.setFieldsValue({
            user:data.data.admin_user,
            name:data.data.admin_name,
            type :data.data.admin_type,
            state:String(data.data.state),
            isDelete : String(data.data.isDelete)
        })
      }else{
        message.warning(data.msg);
      }
    }).catch(err=>{
      console.log(err);
      message.error("获取数据出错，请联系管理员")
    })
  },[]

保存数据，直接提交表单，通过onFinish的参数，直接获取表单的输入

const onFinish = (values) => {
console.log('Success:', values);
      updateAdminInfoById({id,...values}).then(data=>{
if(data.code==200){
          message.success("修改成功");
          navigate("/index/role/list");
        }else{
          message.warning(data.msg);
        }
      }).catch(err=>{
console.log(err);
          message.error("修改出错，请联系管理员");
      });
  };

注：一定要使用Form.Item将表单元素包裹起来，且指定name属性

<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: '请输入姓名!' }]}>
<Input />
</Form.Item>
<Form.Item
label="类型"
name="type">
<Select
style={{
width: 120 
}}
options={[
{
value: '1',
label: '管理员',
},
{
value: '2',
label: '超级管理员',
 }
]}
/>
</Form.Item>

苟有恒 , 何必三更眠五更起

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-11-23，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自 bug收集微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度