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); 7、table的一些操作： （1）全選操作 table 里面加入 rowSelection={rowSelection}， 在render里面 const rowSelection = { selectedRowKeys, onChange: this.onSelectChange.bind(this), onSelection: this.onSelection, }; （2）點擊一行數據，在table里面加入 onRowClick={this.onRowClick.bind(this)} //選擇哪一句 onSelectChange(selectedRowKeys) { console.log('selectedRowKeys changed: ', selectedRowKeys); this.setState({ selectedRowKeys }); }; （3）加載 loading={true}

轉載于:https://www.cnblogs.com/ryt103114/p/6728720.html

總結

以上是生活随笔為你收集整理的ant design框架学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。