引入

yarn add antd

使用

// Index.js 
import 'antd/dist/antd.css';
// Child.js
import {Button} from 'antd'
const Component = ()=>{
    return <Button>你好</Button>
}
export default Component

form 表单

// Index.js 
import 'antd/dist/antd.css';
// Child.js
import {Button, Form, Input} from 'antd'
const layout = {
  labelCol: {span: 4},
  wrapperCol: {span: 16},
}
const tailLayout = {
  wrapperCol: {offset: 4, span: 16},       // offest/偏移  span/大小
}
const Component = observer(()=> {
  const onFinish = (values) => {
    console.log('Success:', values)
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <>
      <h1>注册</h1>
      <Form {...layout}                                     // 布局样式
            name="basic"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
      >
        <Form.Item                                          // 用户名
          label="用户名"
          name="username"
          rules={[{required: true, message: '输入用户名'}]}
        >
          <Input/>
        </Form.Item>
        <Form.Item                                                                                     // 密码
          label="密码"
          name="password"
          rules={[{required: true, message: '输入密码'}]}
        >
          <Input.Password/>
        </Form.Item>
                <Form.Item                                          // 确认密码
          label="确认密码"
          name="confirmPassword"
          rules={[{required: true, message: '确认密码'}]}
        >
          <Input.Password/>
        </Form.Item>
        <Form.Item {...tailLayout}>                                                 // 提交
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </>
  );
})
export default Component;

规则

验证用户名

语法

• rules={[ {validator: validatorUsername} ]}
• validatorUsername = (rule, value) => {} ```javascript const validatorUsername = (rule, value) => { if (/\W/.test(value)) {return Promise.reject(‘只能是数字字母下划线’)} if (value.length < 4 || value.length > 10) {return Promise.reject(‘长度为4~10个字符’)} return Promise.resolve() }

<a name="EJGLs"></a>
### 验证密码
```javascript
<Form.Item
    rules = {[
      {required: true, message: '输入密码'},
      {min: 6, message: '最小长度6个字符'}
    ]}
>
</Form.Item>

验证确认密码

语法

• rules={[ validateConfirm ]}
• const validateConfirm = ( {getFieldValue} ) => ({ validator(rule, value) {} }) ```javascript const validateConfirm = ({getFieldValue}) => ({ // 获取字段值 {getFieldValue} validator(rule, value) { if (getFieldValue(‘password’) === value) {return Promise.resolve()} // 获取 passwors return Promise.reject(‘两次密码不一致’) } })

<a name="xQNvm"></a>
# Upload 上传
```javascript
import {Upload} from 'antd'
import {InboxOutlined} from '@ant-design/icons'
const props = {
  beforeUpload: file => { return false }          // 手动上传 file:当前文件
}
return (
  <Dragger {...props}>
    <p className="ant-upload-drag-icon">
      <InboxOutlined/>
    </p>
    <p className="ant-upload-text">单击或拖动文件到此区域以上传</p>
    <p className="ant-upload-hint">
         支持单次或批量上传
    </p>    
    </Dragger>
)

Message 全局提示

import {message} from 'antd'
const warning = () => {
  message.warning('This is a warning message');
};