antd（Ant Design）

安装

npm i antd -S
import { Icon, table } from ‘antd’;

定制主题：https://ant-design.gitee.io/docs/react/customize-theme-cn
主题颜色变量：https://ant-design.gitee.io/docs/spec/colors-cn

antd 注意事项 & 问题报错 · 语雀

功能实现 & 应用

Form表单中验证应用

validatorFn = (rule, value, callback) => {
  const reg = /[1]+$/;
  if (value && !reg.test(value)) {
      callback('请输入正确的验证应用');
  } else {
      callback();
  }
}
<FormItem {...loayout} label="验证应用">
  {getFieldDecorator('yingyong', {
    rules: [
      { required: true, message: '验证应用不能为空' },
      { validator: this.validatorFn }
    ]
    })(
        <Input placeholder="请输入验证应用">
    )}
</FormItem>

Form 动态增减表单项

效果： 输出：

import React from 'react';
import { Form, Button, Input } from 'antd';
const TestForm: React.FC<{}> = () => {
  return (
    <div>
      <Form form={addForm}>
        <Form.List name="formList">
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item {...field}>
                    <Input placeholder="请输入" style={{ width: 248 }} />
                  </Form.Item>
                ))}
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: 248 }}
                >
                  +
                </Button>
              </div>
            );
          }}
        </Form.List>
      </Form>
      <Button
        style={{ marginTop: 24 }}
        onClick={() => {
          addForm.validateFields().then((values) => {
            console.log(values, 'submit');
          });
        }}
      >
        submit
      </Button>
    </div>
  );
};
export default TestForm;