Ant Design

Layout

页面级整体布局。

主题

Ant design 将影响主题的最小元素称之为Design Token，如colorText, fontSize等。

• 组件中使用当前主题下的 design token

import { theme } from 'antd';
const { useToken } = theme;

const PasswordSet = () => {
  const { token } = useToken();
  return <div>{token.colorText}</div>;
};

• 静态消费

import { theme } from 'antd';
const { getDesignToken } = theme;
const token = getDesignToken();
console.log(token.colorText);

Descriptions

• span 占据几列

Card

Tabs

Table

用于展示行列数据。

• 筛选：filters=[{value,text}]设置筛选项，onFilter触发筛选时会逐个调用onFilter函数，其一满足后续就不再调用了，如名字中带有名或明的人，filterMultiple 默认为true。
• 排序：defaultSortOrder, sorter
• 固定列：scroll:x即table最小宽度为x。父容器大于x，则table宽度等于父容器宽度，否则table宽度等于x。
  指定width 会优先压缩可压缩单元格。

.ant-table-content{
  overflow:"auto"
}
table{
  min-width:"100%";
  width:1000px; (x)
}

Modal

• 异步关闭：confirmLoading=== true显示loading，否则不显示。
• 确定按钮：onOk 点击确定回调 function(e)

Form

• 初始值：Form initialValues

• 校验规则：Item rules，多个规则：rules={[{ required: true }, formNameRule]}

• 输入回车自动执行 onFinish

• 必须配合Form.Item使用，否则收集不到数据

• <Form.Item name="name" noStyle>，不添加额外的dom节点，仅为表单添加name\lable\rules

• 表单数据域发生变化会根据规则校验

• 表单可以嵌入其它元素

<Form>
        <p>not form item</p>
        <Form.Item name="name">
          <Input />
        </Form.Item>
      </Form>

• form css 结构

form 
  - .ant-form-item 
    - .ant-row
      - .ant-col
        - label
      - .ant-col
        - .ant-form-item-control-input

• Form.Item 用于表单组件布局(labelCol,wrapperCol)、校验(rules)、双向绑定（name）
  Item可以被包裹\嵌套如：

    <Form>
      <div>
        <div>
          <Form.Item>xxx</Form.Item>
        </div>
      </div>
    </Form>

    <Form.Item label="Username" name="xx">
      <Space>
        <Form.Item
          name="username"
          noStyle
          rules={[{ required: true, message: 'Username is required' }]}
        >
          <Input style={{ width: 160 }} placeholder="Please input" />
        </Form.Item>
        <Tooltip title="Useful information">
          <Typography.Link href="#API">Need Help?</Typography.Link>
        </Tooltip>
      </Space>
    </Form.Item>

Form.Item 嵌套子组件后，不更新表单值，可以通过 HOC 自定义组件形式来解决这个问题

• 表单布局：layout='inline'

form (flex)
  - .ant-form-item (margin-inline-end:16)
    - .ant-col
      - label
    - .ant-col
      - .ant-form-item-control-input (input 默认有个宽度，select 默认宽度包裹内容，可指定width)

• 嵌套结构

<Form.Item
      name={['user', 'name']}
      label="Name"
      rules={[{ required: true }]}
    >
      <Input />
    </Form.Item>

表单值 values.user.name

• 动态增减表单项 Form.List 封装了增删逻辑，renderProps自定义表单。
• 校验与更新依赖，当依赖项变化时会触发校验与更新
• 表单项的值，直接设置是无效的

// 无效
      <Form.Item label="Password" name="password" rules={[{ required: true }]}>
        <Input value={'xxx'} />
      </Form.Item>

• 动态表单与更新依赖综合应用

import { Button, Form, Input } from 'antd';
const { useForm } = Form;
const Test = () => {
  const [form] = useForm();
  return (
    <Form form={form} onFinish={(values) => console.log(values)}>
      <Form.List name="names">
        {(fields, { add }) => {
          return (
            <>
              {fields.map(({ key, name, ...rest }) => (
                <div key={key}>
                  <Form.Item name={[name, 'rate']} {...rest}>
                    <Input
                      onChange={(e) =>
                        form.setFieldValue(
                          ['names', name, 'price'],
                          e.target.value,
                        )
                      }
                    />
                  </Form.Item>
                  <Form.Item dependencies={[['names', name, 'rate']]}>
                    {() => {
                      return (
                        <div>
                          23
                          <Form.Item name={[name, 'price']} {...rest}>
                            <Input />
                          </Form.Item>
                        </div>
                      );
                    }}
                  </Form.Item>
                </div>
              ))}
              <Button onClick={() => add()}>add</Button>
            </>
          );
        }}
      </Form.List>
      <Form.Item>
        <Button htmlType="submit">submit</Button>
      </Form.Item>
    </Form>
  );
};

export default Test;

Select

• optionRender: 自定义渲染下拉项
• 布局：默认宽度包裹内容，可指定width

Input

• 布局：width:100%，原生input 有个默认宽度。

.ant-input{
    display: inline-block;
    width: 100%;
}

FAQ

• Input 未输入任何值返回 undefined 还是 null?
  Q: 未输入返回undefined, 输入后返回 ''，初始值是 null 或 undefined 都不显示。
• less 如何消费 Design Token