修改了页面布局,让它看上去更像是个图片浏览器了,主要修改的就是PhotoItem.js文件,增加几个响应事件,比如可以显示 下一张、上一张等。
PhotoItem.js
import React from 'react';
import '../config';
class PhotoItem extends React.Component {
constructor(props) {
super(props);
this.state = {
serverUrl: global.constants.serverUrl,
photoItem: props,
showUrl: "",
current: 0,
nextIndex: 0,
preIndex: 0,
total: 0,
}
this.phtotItemClick = this.phtotItemClick.bind(this);
this.handlePrePhoto = this.handlePrePhoto.bind(this);
this.handleNextPhoto = this.handleNextPhoto.bind(this);
this.changePhoto = this.changePhoto.bind(this);
}
componentDidMount (){
const {photoItem} = this.state.photoItem;
console.log(photoItem.length);
if ( photoItem.length >0){
var item = photoItem[0];
this.setState({
showUrl : this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName,
total : photoItem.length,
})
}
}
handlePrePhoto(){
var current = 0;
if (this.state.current>0){
current = this.state.current-1;
}
this.changePhoto(current);
}
handleNextPhoto(){
var current = 0;
if ( this.state.total >this.state.current){
current = this.state.current+1;
}
this.changePhoto(current);
}
changePhoto(current){
const {photoItem} = this.state.photoItem;
var item = photoItem[current];
if (this.state.total > current && current>=0){
this.setState({
current:current,
showUrl : this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName,
});
}else{
console.log(" No photo.");
}
}
phtotItemClick(url){
this.setState ({
showUrl : url,
})
}
render(){
const {photoItem} = this.state.photoItem;
return (
<div className="photoMain">
<div>total:{this.state.total},current:{this.state.current}</div>
<div className="photo-detail">
<ul>
<li onClick={this.handlePrePhoto.bind(this)}>
PrePhoto
</li>
<li>
<img src={this.state.showUrl}></img>
</li>
<li onClick={this.handleNextPhoto.bind(this)}>
NextPhoto
</li>
</ul>
</div>
<div className="photo-list">
<ul>
<li>left</li>
{photoItem.map(item => (
<li key={item.FileName} onClick={this.phtotItemClick.bind(this,this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName)}>
<img src={this.state.serverUrl+'show/'+item.FilePath +'/'+item.FileName} alt={item.FileName}/>
</li>
))}
<li>right</li>
</ul>
</div>
</div>
);
}
}
export default PhotoItem;
Photolist.css
body {
margin: 0;
padding: 0;
}
.photo-detail img {
width: 900px;
}
.photo-detail li {
display: inline;
margin-left: 10px;
}
.photo-list {
display: inline;
}
ul {
list-style: none;
}
.photo-list li {
display: inline;
margin-left: 10px;
}
.photo-list img{
width: 150px;
}
截图: