ant design框架学习

Posted 2020-09-12 任小小

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);