React UI界面：Ant Design初步-编程知识

React UI界面：Ant Design初步

文章目录

- 初步
- 回调函数
- 变量输出

React初步

初步

Antd是一套非常现代的React组件库，是好多人用过的第一个组件库，但我对其印象最深的却是圣诞节彩蛋，只是上网一查才发现，一晃这么多年过去了。

先创建一个React项目，然后安装antd

npx create-react-app hello-world
npm install antd --save

再将其App.js的内容换成AntD推荐的示例项目

import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';const App = () => (<div style={{ padding: '0 24px' }}><h1>antd version: {version}</h1><Space><DatePicker /><Button type="primary">Primary Button</Button></Space></div>
);export default App;

接下来就可以npm start了，相当于见到AntD的第一面

在这里插入图片描述

这个示例程序里，一共用到了按钮、日期选择框、Space三个组件，其中Space表示的就是间隙。

回调函数

从原理上讲，antd只是一组视觉效果，其控件事件的回调逻辑，仍然遵循React乃至js的范式，例如，想为按钮添加一个事件，就可以将上述按钮改成如下形式

<Button type="primary" onClick={()=>{alert("您好！")}}> Hello 
</Button>

这个逻辑非常简单，就是当点击按钮时，弹出您好的对话框，效果如下

在这里插入图片描述

变量输出

接下来需要考虑的是，当点击日历，并选中日期之后，如何把这个值提取出来。推而广之，所有存在数据交互的控件，都存在这个需求。而这种实时数据，对React而言，属于是状态更新，故而需要引入useState。

此外，由于DatePicker中value的数据类型是dayjs，在编译之前，需要先安装一下

npm install dayjs

然后更改App.js的内容

import React, { useState } from 'react'
import dayjs from 'dayjs'
import { DatePicker, Button } from 'antd'export default function App() {const [time, setTime] = useState('')const changeTime = () => {setTime(dayjs());}const getTime = (_, time) => {setTime(dayjs(time))}return (<div><DatePickervalue = {time}placeholder="选择日期"onChange={getTime}/><Button onClick={changeTime}>当前时间</Button></div>)
}