ant design框架学习

Posted 任小小

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ant design框架学习相关的知识,希望对你有一定的参考价值。

1、Input 上传文件:

①限制上传文件的格式:

accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet "
如果是多种格式,中间用","隔开
②上传文件:
<input type=‘file‘ id=‘file‘ name=‘myfile‘ accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet "/>
 <div className="btn-addall">
      <input type=‘button‘className="saveAll" onClick={this.uploadFile.bind(this)} value=‘上传‘ />
      <input type=‘button‘className="cancelAll" onClick={this.closeModal.bind(this)} value=‘取消‘ />
</div>
    uploadFile() {
        const token = sessionStorage.getItem(‘token‘);
        const dbId = this.props.id;
        var fileObj = document.getElementById(‘file‘).files[0]; // 获取文件对象
        var FileController = ‘http://192.168.1.188:5000/api/user/commoditiesUpload‘; // 接收上传文件的后台地址
        // FormData 对象
        var form = new FormData();
        form.append(‘file‘, fileObj); // 文件对象
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open(‘post‘, FileController, true);
        xhr.setRequestHeader("token",token);
        xhr.setRequestHeader("dbId",dbId);
        xhr.onload = function () {
            
        };
        xhr.send(form);
        this.props.closeModal(false);
        hashHistory.push(‘warehouse‘);
    }
2、上传图片
<Upload
        {...props}                        
         onPreview={this.handlePreview.bind(this)}
         onChange={this.handleChange.bind(this)}
         onRemove={this.handleRemoveImage}
  >
     {fileList.length >= 5 ? null : uploadButton}
 </Upload>
const {
            previewVisible,
            previewImage,
            fileList
        } = this.state;
        const uploadButton = (
            <div>
         添加图片
     </div>
        );
        const token = sessionStorage.getItem(‘token‘);
        const dbId = this.props.dbId;
        const props = {
            showUploadList:true,
            action:‘http://192.168.31.134:5000/api/uploadImg‘,
            headers:{
                "token":token
            },
            defaultFileList: [...fileList],
            listType: "picture-card",
        };
handleCancel() {
        this.setState({
            previewVisible: false
        })
    }
    handlePreview(file) {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }

    handleChange({
        fileList
    }) {
        this.setState({
            fileList
        });
    }
    handleRemoveImage(file){
        console.log(‘删除图片的id‘,file.response.data);
    }
3、模块化固然好,但是不要嵌套嵌太深了
4、循环输出输入框:
   const list = this.props.dataList.length ?
            this.props.dataList.map((listItem, index) => (
                <Col span={7} key={index} >
                    <Row type="flex" justify="start" className="robot-col">
                        <Col span={5} className="property">{listItem}:</Col>
                        <Col span={14} className="property">
                            <Input id={‘properties‘ + index}/>
                        </Col>
                    </Row>
                </Col>
            )) : ‘您当前只有默认属性,没有其他属性,赶紧去添加吧~‘;
5、直接点击跳转页面:
<a className="property-a" href="#warehouse/addProducts">添加商品</a>
<Link to="#warehouse/addProduct"  activeClassName="active">Bob With Query Params</Link>
6、点击按钮之后跳转:
import { hashHistory } from ‘react-router‘;
hashHistory.push(‘warehouse/displayProducts:‘ + id);

以上是关于ant design框架学习的主要内容,如果未能解决你的问题,请参考以下文章

Ant Design Pro安装学习

开发你的第一个React + Ant Design网页(一配置+编写主页)

react自制全家桶Webstrom+React+Ant Design+echarts搭建react项目

[原创]React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

ant-design-vue 框架搭建(一)

Ant Design of React 框架使用总结1