react hooks + antd案例:列表的增删改
2023-02-18 16:29:04 时间
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>
苟有恒 , 何必三更眠五更起
相关文章
- Axure RP 8中文版(交互式原型设计工具) axure rp8v8.1.0.3400
- 浏览器滚动条的自定义和隐藏
- tep支持pytest-xdist分布式执行用例及合并Allure报告
- Java编程中忽略这些细节,Bug肯定找上你
- 9个问题,带你掌握流程控制语句中的java原理
- 从IDC Marketscape报告看区块链政务数字化未来:权威解读新热点、新机遇
- chatGPT的火爆,并不偶然
- React 开发 | 常用 Hooks
- JDK19都出来了~是时候梳理清楚JDK的各个版本的特性了【JDK12特性讲解】
- Eolink 让我“重新认识“了自动化测试...
- 老板:你也把咱们网站弄成灰色——网站变灰色如何实现
- iptables规则案例
- ‘极锐’-一种新的锐化算法
- PS/LR滤镜插件套装 Nik Collection v5.3.0 Win/Mac
- Chrome插件:uBlock Origin – Chrome浏览器高效低占用的广告拦截插件
- 前端与区块链
- 云原生之微服务
- 集群动态环境管理神器 Modules
- 记 os_object_release Crash 排查
- 记 libAccessibility 通知 Crash 排查