Ant Design在日常开发中的使用，这里都有

antd的表单组件基本用法

官网ant.design/index-cn

按需导入组件

import {  Form, Input, Button, Checkbox } from 'antd'

<Form validateTrigger={['onBlur', 'onChange']}>
  <Form.Item
    name="mobile"
    rules={[
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '手机号码格式不对'
      },
      { required: true, message: '请输入手机号' }
    ]}
  >
    <Input size="large" placeholder="请输入手机号" />
  </Form.Item>
  <Form.Item
    name="code"
    rules={[
      { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
      { required: true, message: '请输入验证码' }
    ]}
  >
    <Input size="large" placeholder="请输入验证码" maxLength={6} />
  </Form.Item>
  <Form.Item name="remember">
    <Checkbox className="login-checkbox-label">
      我已阅读并同意「用户协议」和「隐私条款」
    </Checkbox>
  </Form.Item>

  <Form.Item>
    <Button type="primary" htmlType="submit" size="large" block>
      登录
    </Button>
  </Form.Item>
</Form> 

validateTrigger属性:设置在form上就是统一设置字段触发验证的时机 设置在Form.Item上，设置触发验证时机

注意点： 每一个Form.Item上都要写name属性

size="large"可以设置表单或者按钮的大小

表单组件本身有校验功能,直接将rules写在Form.Item上，一定要写name属性

<Form.Item
name="username"
rules={
[
  { pattern: /正则/, message: '错误提示' },
  { required: true, message: '错误提示' } // 必须要填
]
}
> 

htmlType设置按钮的类型

自定义表单的校验规则

rules={
[{validator(rule,value){
if(通过校验) {
  return Promise.resolve()
} else {
  return Promise.reject(new Error('错误说明'))
}
}}]
} 

使用

<Form.Item
        name="agree"
        valuePropName="checked"
        rules={[
          {
            validator (rule, value) {
              if (value) {
                return Promise.resolve()
              } else {
                return Promise.reject(new Error('请阅读并同意协议'))
              }
            }
          }
        ]}>
        <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
</Form.Item> 

收集表单数据

• 给Form添加onFinish <Form onFinish={this.onFinish},然后声明onFinish函数

  onFinish = (values) => {
  
  // values会是一个对象，键名就是表单项的name，键值就是表单元素的内容
  
  console.log(values) 
  } 
  

• 给Form.Item 添加name属性 <Form.Item name="password">

• 将按钮的htmlType设为submit

设置表单的默认值

<Form
name="basic"
size="large"
onFinish={this.login}
initialValues={{
agree: true,
mobile: '13811111111',
code: '246810',
}}
> 

{agree: true}对象里面的键就是Form.Item上的name属性，设置的值就是这一项的默认值

在非提交按钮中获取到表单数据

如果要在非提交按钮中获取到表单数据，需要通过调用 Form 的实例方法来实现。anta提供有两个方法：

1、getFieldsValue() 仅获取表单数据，不进行表单校验

2、validateFields() 先进行表单校验，再获取表单数据【此处，使用该方法】

消息提示组件的使用

message.提示类型(提示内容 , 自动关闭的延时 单位秒 设为 0 时不自动关闭 , 关闭时触发的回调函数)
// 提示类型: success error info warning warn loading 

代码中的使用

const history = useHistory()
const onFinish = async (values) => {
// console.log('Success:', values)
// 发送请求，进行登录
try {
await dispatch(login(values))
message.success('登录成功', 1, () => {
// 回调里跳转
  history.replace('/layout')
})
} catch (e) {
// 错误消息，持续展示1秒
message.error(e.response.data.message, 1)
}
} 

这里一个注意点： 一般登录成功跳转到到首页，这时候用replace比push合适，因为replace不能后退，使用push跳转是可以后退的，我们登录成功跳转到首页是不需要有后退的

给按钮增加loading状态

首先提供一个状态loading

const [loading, setLoading] = useState(false) 

使用loading状态

<Button type="primary" htmlType="submit" block loading={loading}>
登录 

在发送请求里修改状态

const onFinish = async (values) => {
// 发送请求时开启loading状态
setLoading(true)
// console.log('Success:', values)
// 发送请求，进行登录
try {
await dispatch(login(values))
message.success('登录成功', 1, () => {
  history.replace('/home')
})
} catch (e) {
message.error(e.response.data.message, 1, () => {
  
})
}finally {
// finally是一定会走的，所在不管成功还是失败都关闭loading状态
  setIsloading(false)
}
} 

table组件

<Table dataSource={dataSource} columns={columns} />

// 表格的每一行
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}
]

// 表头
const columns = [
{
title: '封面',
dataIndex: 'name',
key: 'name'
},
{
title: '标题',
dataIndex: 'age',
key: 'age'
}] 

页面结构

<Card title="根据筛选条件共查询到xxx条结果:" style={{ marginTop: 10 }}>
<Table dataSource={dataSource} columns={columns} />
</Card> 

表格自定义列

使用render来渲染 操作列

const columns = [
{
title: '标题',
dataIndex: '数据属性名',
render(当前数据， 整行数据，行索引){
  return 要渲染的内容
}
} 
] 

代码中使用

{
title: '操作', //这一列的表题
render() {
  return (   // return里需要自定义的内容
    <Space>
      <Button
        type="primary"
        shape="circle"
        icon={<EditOutlined />}
      ></Button>
      <Button
        type="primary"
        shape="circle"
        danger
        icon={<DeleteOutlined />}
      ></Button>
    </Space>
  )
},
}, 

Space是antd里的间距组件

分页功能

table组件集成了分页功能

<Table 
// 省略其他...
pagination={{
        pageSize: pageSize, // 每页多少条
        current: current, // 当前几页
        total: total, // 总条数
        onChange: onChange // 改了页码，一页几条，就会触发
      }}
</Table> 

拓展个富文本编辑器的使用

安装富文本编辑器：npm i react-quill，这个用的最多

import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'

<Form.Item label="内容" name="content">
<ReactQuill></ReactQuill>
</Form.Item> 

注意点： 通过 Form 组件的 initialValues 为富文本编辑器设置初始值，否则会报错

上传组件的基本使用

1、为 Upload 组件添加 action 属性和name，指定封面图片上传接口地址和参数名 2、创建状态 fileList 存储已上传封面图片地址，并设置为 Upload 组件的 fileList 属性值 3、为 Upload 添加 onChange 属性，监听封面图片上传、删除等操作 4、在 change 事件中拿到当前图片数据，并存储到状态 fileList 中

{/* 
fileList: 控制上传的图片
action: 上传的地址
name: 上传的文件的名字 默认file
maxCount:上传的最大数量
*/}

<Upload
listType="picture-card"
fileList={fileList}
name="image"
action={`基地址+upload`}
onChange={onChange}
maxCount={1}
>
<PlusOutlined />
</Upload>


const onChange = ({ fileList }) => {
setFileList(fileList)
}