Ant Design - React 组件库和axios

一、导入

在项目中用npm/yarn安装组件库

// npm导入
npx create-react-app antd-demo --template typescript

//yarn导入
yarn create react-app antd-demo --template typescript

在用npm/yarn安装axios

npm i axios

yarn add axios

二、使用antd和axios

// 导入antd 组件库 相应的组件
import { Input, Table, Space, Popconfirm } from 'antd'

// 导入axios来请求数据
import axios from 'axios'

注意：在使用组件时要导入与组件相对应的css

@import '~antd/dist/antd.css';

三、示例

App.js

import { Input, Table, Space, Popconfirm } from 'antd'
import React from 'react'
import './App.css'
import axios from 'axios'

// 从input里面结构Search
const { Search } = Input

class App extends React.Component {
  state = {
    // 表格数据
    list: [],
    // 类数据
    columns: [
      {
        title: '任务编号',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '任务名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '任务描述',
        dataIndex: 'des',
        key: 'des',
      },
      {
        title: '操作',
        dataIndex: 'do',
        key: 'do',
        // render: (当前行的值，当前行数据，当前行索引)
        render: (text, record, index) => (
          <Space size="middle">
            <Popconfirm title="确定要删除吗?"
              onConfirm={() => this.handleDelete(record.id)}>
              <a href="#">删除</a>
            </Popconfirm>
          </Space>
        ),
      },
    ]
  }

  // 搜索——将输入框的数据当作关键词去搜索相应的数据
  onSearch = async (value) => {
    // 使用接口搜索数据，然后渲染列表
    // const result = await axios.get(`接口?name=${value}`)
    // this.setState({
    //   list: result.data
    // })

    // 模拟搜索数据
    this.setState({
      list: this.state.list.filter(item => {
        return item.name.indexOf(value) !== -1
      })
    })
  }

  // 删除
  handleDelete = async (id) => {
    // 点击调用删除接口
    // await axios.delete(`接口${id}`)
    // // 重新获取数据
    // this.loadList()

    // 模拟删除数据
    this.setState({
      list: this.state.list.filter(item => {
        return item.id !== id
      })
    })
  }

  // 加载列表
  loadList = async () => {
    // 使用接口获取表格数据，然后渲染列表
    // const result = await axios.get('接口')
    // this.setState({
    //   list: result.data
    // })

    // 模拟获取数据
    let lists = [
      {id: 1, name: '第一', des: '第一描述'},
      {id: 2, name: '第二', des: '第二描述'},
      {id: 3, name: '第三', des: '第三描述'},
      {id: 4, name: '第四', des: '第四描述'},
    ]
    this.setState({
      list: lists
    })
  }

  // 初始化时发送网络请求，获取数据，然后渲染
  componentDidMount () {
    this.loadList()
  }

  render () {
    return (
      <div className="container">
        <div className="search-box">
        {/* onSearch事件是在点击搜索/回车/清除时触发 value也就是当前输入框的值 */}
          <Search
            placeholder="请输入关键词"
            allowClear
            enterButton="搜索"
            size="large"
            onChange={this.inputChange}
            value={this.state.keyword}
            onSearch={this.onSearch}
          />
        </div>
        {/* table 表格组件 依赖两个必要数据 一个定义列 一个用来遍历渲染数据 */}
        {/* dataSource 表格数据源 */}
        <Table bordered dataSource={this.state.list} columns={this.state.columns} pagination={false} />
      </div>
    )
  }
}

export default App

App.css

@import '~antd/dist/antd.css';

.container {
  width: 600px;
  margin: 0 auto;
}
.search-box {
  display: flex;
  margin-bottom: 10px;
}
.input-box {
  margin-right: 20px;
}