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