初次接觸react，通過學習react官方文檔嗓蘑、學習B站上“張sir手摸手帶你學前端”這位老師的視頻须肆，采用 React + Antd + JavaScript + axios ，終于完成了簡單Table的增刪改查功能
新建一個 CRUDDemo.js 的文件桩皿，插入完成代碼豌汇，在 App.js 中引入 CRUDDemo.js，并下載好 axios泄隔、antd 等需要用到的庫拒贱，然后就可以啟動項目啦
importTablefrom'./CRUDDemo';
```javascript
//讀取數(shù)據(jù)——get
readData() {
? ? ? ? axios.get('http://....你的url')
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? // console.log('調(diào)用成功')
? ? ? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? ? ? data: res.data,
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? res.data.forEach((r, i) => {
? ? ? ? ? ? ? ? ? ? r.key = i;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }).catch(error => {
? ? ? ? ? ? ? ? console.log(error)
? ? ? ? ? ? })
? ? }
```
```javascript
//實現(xiàn)新增數(shù)據(jù)——post
postData = () => {
? ? ? ? axios.post('http://....你的url', {
? ? ? ? ? ? name: this.state.name,
? ? ? ? ? ? age: this.state.age,
? ? ? ? ? ? sex: this.state.sex,
? ? ? ? ? ? address: this.state.address,
? ? ? ? ? ? phone: this.state.phone
? ? ? ? }).then(res => {
? ? ? ? ? ? message.success('添加成功');
? ? ? ? ? ? // console.log('添加成功')
? ? ? ? ? ? this.readData()
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? visible: false
? ? ? ? ? ? });
? ? ? ? }).catch(error => {
? ? ? ? ? ? message.error("按照格式要求輸入")
? ? ? ? });
? ? ? ? this.formRef.current.resetFields() //新增成功后清空輸入框中的數(shù)據(jù)，避免下次點擊新增時出現(xiàn)上次輸入的數(shù)據(jù)
? ? }
```
```javascript
//實現(xiàn)刪除數(shù)據(jù)——delete
deleteData = (id) => {
//id前面的 / 不能省略佛嬉，這里使用反引號
? ? ? ? axios.delete(`http://...你的url/${id}`)
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? message.success('刪除成功');
? ? ? ? ? ? ? ? // console.log('刪除成功')
? ? ? ? ? ? ? ? this.readData()
? ? ? ? ? ? })
? ? };
```
```javascript
//實現(xiàn)修改數(shù)據(jù)——put或patch
? ? updateData = () => {
? ? //rowid前面的 / 不能省略逻澳，這里使用反引號
? ? axios.patch(`http:....你的url/${this.state.rowid}`, {
? ? ? ? ? ? name: this.state.name,
? ? ? ? ? ? age: this.state.age,
? ? ? ? ? ? sex: this.state.sex,
? ? ? ? ? ? address: this.state.address,
? ? ? ? ? ? phone: this.state.phone
? ? ? ? }).then(res => {
? ? ? ? ? ? message.success('修改成功');
? ? ? ? ? ? // console.log('修改成功')
? ? ? ? ? ? this.readData()
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? visible1: false
? ? ? ? ? ? });
? ? ? ? }).catch(error => {
? ? ? ? ? ? message.error("按照格式要求輸入")
? ? ? ? })
? ? ? ? this.formRef1.current.resetFields() //修改成功后清空輸入框中的數(shù)據(jù)
? ? }
```
```javascript
//實現(xiàn)按照姓名查詢數(shù)據(jù)
? ? queryfn = (e) => {
? ? ? ? let keyword = e.target.value
? ? ? ? clearTimeout(window.timer)? //防抖查詢
? ? ? ? window.timer = setTimeout(() => {
? ? ? ? ? ? let data = this.state.data.filter(r => r.name === keyword)
? ? ? ? ? ? if (data.length !== 0) {
? ? ? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? ? ? data
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? }, 500)
? ? }
```
```javascript
import './App.css';
import React, { Component } from 'react';
import { Space, Table, Popconfirm, Button, Input, Divider, Form, Drawer, message } from 'antd';
import axios from 'axios';
class CRUDDemo extends Component {
? ? formRef = React.createRef() //清空輸入框內(nèi)容
? ? formRef1 = React.createRef()
? ? constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? visible: false,
? ? ? ? ? ? visible1: false,
? ? ? ? ? ? rowid: null,
? ? ? ? ? ? columns: [
? ? ? ? ? ? ? ? { title: '姓名', dataIndex: 'name', key: 'name', },
? ? ? ? ? ? ? ? { title: '性別', dataIndex: 'sex', key: 'sex', },
? ? ? ? ? ? ? ? { title: '年齡', dataIndex: 'age', key: 'age', },
? ? ? ? ? ? ? ? { title: '家庭住址', dataIndex: 'address', key: 'address', },
? ? ? ? ? ? ? ? { title: '聯(lián)系電話', dataIndex: 'phone', key: 'phone' },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: '操作',
? ? ? ? ? ? ? ? ? ? key: 'action',
? ? ? ? ? ? ? ? ? ? render: (_, record) => (
? ? ? ? ? ? ? ? ? ? ? ? <Space size="middle">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a className="action-link" onClick={this.showDrawer1.bind(this, record)}>修改</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Popconfirm title="確定要刪除嗎?" onConfirm={this.deleteData.bind(this, record.id)} onCancel={this.onClose.bind(this)} okText="確定" cancelText="取消" >
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a className="action-link" style={{ color: record.obsoleted ? '#1890ff' : '#fa8c16' }} >刪除</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </Popconfirm>
? ? ? ? ? ? ? ? ? ? ? ? </Space>
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ],
? ? ? ? ? ? data: [], //儲存axios獲取到的數(shù)據(jù)
? ? ? ? }
? ? }
? ? //關閉新增信息對話框
? ? onClose = () => {
? ? ? ? this.setState({
? ? ? ? ? ? visible: false
? ? ? ? });
? ? ? ? message.error('取消操作');
? ? };
? ? //關閉修改信息對話框
? ? onClose1 = () => {
? ? ? ? this.setState({
? ? ? ? ? ? visible1: false
? ? ? ? });
? ? ? ? message.error('取消操作');
? ? };
? ? //顯示新增信息抽屜
? ? showDrawer = () => {
? ? ? ? this.setState({
? ? ? ? ? ? visible: true
? ? ? ? });
? ? };
? ? //顯示修改信息抽屜
? ? showDrawer1 = (r) => {
? ? ? ? this.setState({
? ? ? ? ? ? visible1: true,
? ? ? ? ? ? rowid: r.id,? ? ? ?
? ? ? ? })
? ? ? ? setTimeout(() => {this.formRef1.current.setFieldsValue(r) }, 0);}; //設置 0 毫秒延遲回顯數(shù)據(jù)
? ? //將數(shù)據(jù)顯示在初始頁面
? ? componentDidMount() {
? ? ? ? this.readData()
? ? }
? ? //實現(xiàn)讀取數(shù)據(jù)——————get
? ? readData() {
? ? ? ? axios.get('http://....你的url')
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? // console.log('調(diào)用成功')
? ? ? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? ? ? data: res.data,
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? res.data.forEach((r, i) => {
? ? ? ? ? ? ? ? ? ? r.key = i;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }).catch(error => {
? ? ? ? ? ? ? ? console.log(error)
? ? ? ? ? ? })
? ? }
? ? //新增信息時的Input輸入框事件
? ? handleChange = (e) => {
? ? ? ? this.setState({
? ? ? ? ? ? [e.target.id]: e.target.value
? ? ? ? })
? ? }
? ? //修改信息時的Input輸入框事件
? ? handleChange1 = (e) => {
? ? ? ? this.setState({
? ? ? ? ? ? [e.target.id]: e.target.value
? ? ? ? })
? ? }
? ? //新增數(shù)據(jù)——————post
? ? //新增、修改數(shù)據(jù)時提交失敗時的提示信息
? ? onFinishFailed = (errorInfo) => {
? ? ? ? console.log('Failed:', errorInfo);
? ? ? ? message.error("按照格式要求輸入")
? ? };
? ? postData = () => {
? ? ? ? axios.post("http://....你的url", {
? ? ? ? ? ? name: this.state.name,
? ? ? ? ? ? age: this.state.age,
? ? ? ? ? ? sex: this.state.sex,
? ? ? ? ? ? address: this.state.address,
? ? ? ? ? ? phone: this.state.phone
? ? ? ? }).then(res => {
? ? ? ? ? ? message.success('添加成功');
? ? ? ? ? ? // console.log('添加成功')
? ? ? ? ? ? this.readData()
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? visible: false
? ? ? ? ? ? });
? ? ? ? }).catch(error => {
? ? ? ? ? ? message.error("按照格式要求輸入")
? ? ? ? });
? ? ? ? this.formRef.current.resetFields() //新增成功后清空輸入框中的數(shù)據(jù)暖呕，避免下次點擊新增時出現(xiàn)上次輸入的數(shù)據(jù)
? ? }
? ? // // 實現(xiàn)刪除————————delete
? ? deleteData = (id) => {
? ? ? ? axios.delete(`http://....你的url/${id}`) //id前面的 / 不能省略
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? message.success('刪除成功');
? ? ? ? ? ? ? ? // console.log('刪除成功')
? ? ? ? ? ? ? ? this.readData()
? ? ? ? ? ? })
? ? };
? ? //實現(xiàn)按照姓名查詢數(shù)據(jù)
? ? queryfn = (e) => {
? ? ? ? let keyword = e.target.value
? ? ? ? clearTimeout(window.timer)? //防抖查詢
? ? ? ? window.timer = setTimeout(() => {
? ? ? ? ? ? let data = this.state.data.filter(r => r.name === keyword)
? ? ? ? ? ? if (data.length !== 0) {
? ? ? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? ? ? data
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? }, 500)
? ? }
? ? //實現(xiàn)修改數(shù)據(jù)——put或patch
? ? updateData = () => {
? ? ? ? axios.patch(`http://....你的url/${this.state.rowid}`, {
? ? ? ? ? ? name: this.state.name,
? ? ? ? ? ? age: this.state.age,
? ? ? ? ? ? sex: this.state.sex,
? ? ? ? ? ? address: this.state.address,
? ? ? ? ? ? phone: this.state.phone
? ? ? ? }).then(res => {
? ? ? ? ? ? message.success('修改成功');
? ? ? ? ? ? // console.log('修改成功')
? ? ? ? ? ? this.readData()
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? visible1: false
? ? ? ? ? ? });
? ? ? ? }).catch(error => {
? ? ? ? ? ? message.error("按照格式要求輸入")
? ? ? ? })
? ? ? ? this.formRef1.current.resetFields() //修改成功后清空輸入框中的數(shù)據(jù)
? ? }
? ? render() {
? ? ? ? let data = this.state.data;
? ? ? ? let columns = this.state.columns;
? ? ? ? let { name, age, sex, address, phone } = this.state;
? ? ? ? return (
? ? ? ? ? ? <div className="App">
? ? ? ? ? ? ? ? <Button type="primary" onClick={this.showDrawer.bind(this)} >添加信息 </Button>
? ? ? ? ? ? ? ? <Input placeholder="請根據(jù)姓名查找信息" style={{ marginLeft: '10px', width: '20%' }} onInput={this.queryfn} />
? ? ? ? ? ? ? ? <Divider plain>人員信息表格</Divider>
? ? ? ? ? ? ? ? <Table columns={columns} dataSource={data} >? </Table>
? ? ? ? ? ? ? ? <Drawer title="添加個人信息" onClose={this.onClose} visible={this.state.visible}>
? ? ? ? ? ? ? ? ? ? <Form ref={this.formRef} onFinish={this.postData} onFinishFailed={this.onFinishFailed} autoComplete="off" >
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="name"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="姓名"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的姓名', }, ] } >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入您的姓名" id="name" value={name} onChange={this.handleChange} pattern="[\u4e00-\u9fa5]{2,6}$" title='輸入2-6位中文漢字'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="sex"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="性別"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的性別', },]}? >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入您的性別" id="sex" value={sex} onChange={this.handleChange} pattern="^[男|女]{1}$" title='輸入男或女' />
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="age"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="年齡"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的年齡', },]} >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入您的年齡" id="age" value={age} onChange={this.handleChange} pattern="^(?:[1-9][0-9]?|1[01][0-9]|120)$" title='輸入1-120之間的數(shù)字'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="address"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="家庭住址"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的家庭住址', },]} >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入您的家庭住址" id="address" value={address} onChange={this.handleChange} pattern="[\u4e00-\u9fa5]{1,100}$" title='輸入有效中文漢字'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="phone"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="聯(lián)系電話"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的聯(lián)系電話', },]} >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入11位聯(lián)系電話" id="phone" value={phone} onChange={this.handleChange} pattern="^1[0-9]{10}$" title='輸入1開頭的11位有效手機號'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Button onClick={this.onClose.bind(this)}>取消</Button>
? ? ? ? ? ? ? ? ? ? ? ? <Button? htmlType="submit" type="primary">完成 </Button>
? ? ? ? ? ? ? ? ? ? </Form>
? ? ? ? ? ? ? ? </Drawer>
? ? ? ? ? ? ? ? <Drawer title="修改個人信息" onClose={this.onClose1} visible={this.state.visible1}>
? ? ? ? ? ? ? ? ? ? <Form ref={this.formRef1} onFinish={this.updateData} onFinishFailed={this.onFinishFailed} autoComplete="off" >
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="name"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="姓名"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的姓名', },]}? ? >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入您的姓名" id="name" value={name} onChange={this.handleChange1} pattern="[\u4e00-\u9fa5]{2,6}$" title='輸入2-6位中文漢字'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="sex"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="性別"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的性別', },]}? >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入您的性別" id="sex" value={sex} onChange={this.handleChange1} pattern="^[男|女]{1}$" title='輸入男或女'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="age"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="年齡"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的年齡', },]} >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入您的年齡" id="age" value={age} onChange={this.handleChange1} pattern="^(?:[1-9][0-9]?|1[01][0-9]|120)$" title='輸入1-120之間的數(shù)字'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="address"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="家庭住址"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的家庭住址', },]}? >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入您的家庭住址" id="address"? onChange={this.handleChange1} pattern="[\u4e00-\u9fa5]{1,100}$" title='輸入有效中文漢字'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Form.Item
? ? ? ? ? ? ? ? ? ? ? ? ? ? name="phone"
? ? ? ? ? ? ? ? ? ? ? ? ? ? label="聯(lián)系電話"
? ? ? ? ? ? ? ? ? ? ? ? ? ? rules={[{ required: true, message: '請輸入您的聯(lián)系電話', },]} >
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input placeholder="請輸入11位聯(lián)系電話" id="phone" value={phone} onChange={this.handleChange1}? pattern="^1[0-9]{10}$" title='輸入1開頭的11位有效手機號'/>
? ? ? ? ? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ? ? ? ? ? ? <Button onClick={this.onClose1.bind(this)}>取消</Button>
? ? ? ? ? ? ? ? ? ? ? ? <Button? htmlType="submit" type="primary">完成 </Button>
? ? ? ? ? ? ? ? ? ? </Form>
? ? ? ? ? ? ? ? </Drawer>
? ? ? ? ? ? </div>
? ? ? ? );
? ? }
}
export default CRUDDemo;
```
完整頁面
新增信息
修改信息
刪除信息
查詢信息
本文為原創(chuàng)斜做，轉(zhuǎn)載請注明出處
我的CSDN博客地址【React+antd】React結合antd實現(xiàn)表格的增刪改查_qq_46105844的博客-CSDN博客
