ReactJS UI Ant Design 数据入口组件完整参考

Ant Design 是一款基于 React 的前端 UI 组件库，提供了众多的实用、美观、易用的组件。其中也包括了一系列用于数据展示和操作的组件，被广泛应用于不同的企业级 Web 应用中。

本文以 Ant Design 中的数据入口组件为主要讲解内容，包括了各种常用的数据录入、操作和展示组件的使用方法和实际代码示例。以下即为完整的参考内容。

基本数据输入组件

在表单数据录入中，最基本的就是输入框和单选、多选框等基本元素的组合。Ant Design 也提供了一系列相应的组件。以下是其中较为常用的几个：

Input 输入框组件

import { Input } from 'antd';

用法：

<Input placeholder="Basic usage" />

效果：

Radio 单选框组件

import { Radio } from 'antd';

用法：

<Radio.Group defaultValue="a">
  <Radio.Button value="a">Button A</Radio.Button>
  <Radio.Button value="b">Button B</Radio.Button>
  <Radio.Button value="c">Button C</Radio.Button>
  <Radio.Button value="d">Button D</Radio.Button>
</Radio.Group>

效果：

<Radio.Group defaultValue="a"> <Radio.Button value="a">Button A</Radio.Button> <Radio.Button value="b">Button B</Radio.Button> <Radio.Button value="c">Button C</Radio.Button> <Radio.Button value="d">Button D</Radio.Button> </Radio.Group>

Checkbox 多选框组件

import { Checkbox } from 'antd';

用法：

<Checkbox.Group style={{ width: '100%' }} defaultValue={['Apple']}>
  <Row>
    <Col span={8}>
      <Checkbox value="Apple">Apple</Checkbox>
    </Col>
    <Col span={8}>
      <Checkbox value="Pear">Pear</Checkbox>
    </Col>
    <Col span={8}>
      <Checkbox value="Orange">Orange</Checkbox>
    </Col>
  </Row>
</Checkbox.Group>

效果：

<Checkbox.Group style={{ width: '100%' }} defaultValue={['Apple']}> Apple Pear Orange </Checkbox.Group>

DatePicker 日期选择器组件

import { DatePicker } from 'antd';

用法：

<DatePicker />

效果：

基本操作

在数据操作中，也常常用到一些基本的数据展示和操作组件。Ant Design 也提供了许多相应的组件。以下是其中较为常用的几个：

Button 按钮组件

import { Button } from 'antd';

用法：

<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button>
<Button type="link">Link Button</Button>

效果：

Primary Button Default Button Dashed Button Text Button Link Button

Modal 对话框组件

import { Modal, Button } from 'antd';

用法：

const [visible, setVisible] = useState(false);

const showModal = () => {
  setVisible(true);
};

const handleOk = () => {
  setVisible(false);
};

const handleCancel = () => {
  setVisible(false);
};

return (
  <>
    <Button type="primary" onClick={showModal}>
      Open Modal
    </Button>
    <Modal
      title="Basic Modal"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <p>Some contents...</p>
    </Modal>
  </>
);

效果：

const [visible, setVisible] = useState(false);

const showModal = () => { setVisible(true); };

const handleOk = () => { setVisible(false); };

const handleCancel = () => { setVisible(false); };

Message 全局提示组件

import { message } from 'antd';

用法：

const showMessage = () => {
  message.success('This is a success message');
};

效果：

const showMessage = () => { message.success('This is a success message'); };

数据展示

在数据展示中，有许多组件用于展示各种不同形式的数据。Ant Design 也提供了许多相应的组件。以下是其中较为常用的几个：

Table 表格组件

import { Table } from 'antd';

用法：

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

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

效果：

const dataSource = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ];

const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ];

List 列表组件

import { List } from 'antd';

用法：

const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];

return <List bordered dataSource={data} renderItem={(item) => <List.Item>{item}</List.Item>} />;

效果：

const data = [ 'Racing car sprays burning fuel into crowd.', 'Japanese princess to wed commoner.', 'Australian walks 100km after outback crash.', 'Man charged over missing wedding girl.', 'Los Angeles battles huge wildfires.', ];

<List bordered dataSource={data} renderItem={(item) => <List.Item>{item}</List.Item>} />;

Card 卡片组件

import { Card } from 'antd';

用法：

return (
  <Card
    hoverable
    style={{ width: 240 }}
    cover={
      <img
        alt="example"
        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
      />
    }
  >
    <Card.Meta title="Europe Street beat" description="www.instagram.com" />
  </Card>
);

效果：

<Card hoverable style={{ width: 240 }} cover={ <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" /> }

<Card.Meta title="Europe Street beat" description="www.instagram.com" /> ;

结束语

以上即为 Ant Design 中常用的数据入口组件的使用方法和代码示例。希望本文能够帮助开发者更加有效地运用 Ant Design 中的组件，进行数据的输入、操作和展示。