Ant Design of React 浏览器引入Demo

梦里藍天

已于 2022-03-30 08:09:01 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

于 2020-10-08 17:23:23 首次发布

How to hatch an egg without an incubator

本文链接：https://blog.youkuaiyun.com/ren365880/article/details/108965765

Ant Design 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在React项目中通过import引入Ant Design的DatePicker组件，并展示了如何使用它进行日期选择，并通过onChange回调处理。同时，提供了浏览器引入所需的外部库和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打包组件引入方式：

import { DatePicker, Space } from 'antd';

function onChange(date, dateString) {
  console.log(date, dateString);
}

ReactDOM.render(
  <Space direction="vertical">
    <DatePicker onChange={onChange} />
  </Space>,
  mountNode,
);

浏览器引入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/6.10.3/babel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.0.2/antd.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.0.2/antd.js"></script>
</head>

<body>
    <div id="root"></div>
    
    <script type="text/babel">

        class App extends React.Component {
            state = {
                date: null,
            };
            
            handleChange = date => {
                antd.message.info(`您选择的日期是: ${date ? date.format('YYYY-MM-DD') : '未选择'}`);
                this.setState({ date });
            };
            render() {
                const { date } = this.state;
                return (
                    <div style={{ width: 400, margin: '100px auto' }}>
                        <antd.DatePicker onChange={this.handleChange} />
                        <div style={{ marginTop: 20 }}>
                            当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
                        </div>
                    </div>
                );
            }
        }
        ReactDOM.render(<App />,document.getElementById("root"));
    </script>
</body>
</html>