react-anted的运用

anted运用加载：参考资料https://ant.design/docs/react/introduce-cn

cnpm install --save antd

import {DatePicker} from 'antd'

样式加载两种方式：第一种

直接手动引入：import 'antd/dist/antd.css'

第二种在.babelrc文件中引入：

在引入下面的必须要加载：

cnpm install --save-dev babel-plugin-import

 "plugins": [    ["import", { libraryName: "antd", style: "css" }]    ]

方能成功；

import {DatePicker,message } from 'antd'handleChange(date) {    console.log(date)    message.info('您选择的日期是: ' + date.toLocaleString());    this.setState({ date:date });  }render(){        return(                    <div className='mine'>         我来啦         <DatePicker onChange={value=>this.handleChange(value)} className='datePicker' />         <div>当前日期：{this.state.date.toString()}</div>         <Hello/>        </div>    )  }}

button按钮的用法：

 <div className="hello">        <Button type="primary" id='btn' loading={this.state.loading} onClick={this.enterLoading.bind(this)}>Primary</Button>        <Button>Default</Button>        <Button type="dashed" icon='search'></Button>        <Button type="danger">Danger</Button> </div>

详情参考antd官网API文档；https://ant.design/components/button-cn/

Icon图标的用法：

<Icon type="step-backward" spin='true' /><Icon type="step-forward" style={{ fontSize: 20, color: '#08c' }}/>

详情API参考API文档：
https://ant.design/components/icon-cn/

栅格系统：24 栅格系统

<Row>                <Col span={12}>24列栅格</Col>                <Col span={12}>24列栅格</Col>            </Row>            <Row>              <Col span={8}>col-8</Col>              <Col span={8} offset={8}>col-8</Col>            </Row>            <Row>              <Col span={6} offset={6}>col-6</Col>              <Col span={6} offset={6}>col-6</Col>            </Row>            <Row>              <Col span={18} push={6}>col-18 col-push-6</Col>              <Col span={6} pull={18}>col-6 col-pull-18</Col>            </Row>            <Row type="flex" justify="start">              <Col span={4}>col-4</Col>              <Col span={4}>col-4</Col>              <Col span={4}>col-4</Col>              <Col span={4}>col-4</Col>            </Row>

下拉菜单：

render(){  const menu = (      <Menu>        <Menu.Item>          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>        </Menu.Item>        <Menu.Item>          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>        </Menu.Item>        <Menu.Item>          <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a>        </Menu.Item>      </Menu>  )    return(      <div className="hello">              <div>            <Dropdown overlay={menu}>                <a className="ant-dropdown-link" href="#">                  Hover me <Icon type="down" />                </a>             </Dropdown>         </div>      </div>    )  }}

上传图片文件：

import { Upload, message, Button, Icon } from 'antd';class News extends Component{  render(){  const props = {  name: 'file',  action: '//jsonplaceholder.typicode.com/posts/',  headers: {    authorization: 'authorization-text',  },  onChange(info) {    if (info.file.status !== 'uploading') {      console.log(info.file, info.fileList);    }    if (info.file.status === 'done') {      message.success(`${info.file.name} file uploaded successfully`);    } else if (info.file.status === 'error') {      message.error(`${info.file.name} file upload failed.`);    }  },   };    return(      <div className="hello">      <Upload {...props}>    <Button>      <Icon type="upload" /> Click to Upload    </Button>  </Upload>        </div>    )  }}