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>
      <DatePicker
        value = {time}
        placeholder="选择日期"
        onChange={getTime}
      />
      <Button onClick={changeTime}>当前时间</Button>
    </div>
  )
}

上面代码中，讲DatePicker的value与time绑定在一起。此外创建了两个函数，分别在DatePicker发生变化时和点击按钮时进行回调。其中，点击按钮，则将DatePicker的值设为当前日期，当DatePicker发生更改时，则将此值设为选中值。

效果如下