需求
本周要实现一个上传图片的功能，简化应用场景：点击上传图片，增加一张图片，hover图片，出现删除按钮，点击删除按钮，删除该图片。
效果
delete.gif
分析
规划级别：图片+删除按钮作为一个子组件（此处是Image），整体作为一个父组件
注意的点：生成的组件是一个数组，为了准确的删掉对应项，生成对应编号。点击删除按钮反馈当前编号，然后进行删除。由于子组件生成后，index属性是固定的，当删除元素的时候就不知道是哪个元素，所以可以通过自定义属性data-index来获取子组件的编号。
具体逻辑：数据驱动，使用数据展示界面，在state里保存要展示的数据，在render里动态生成子组件，render里的子组件会根据数据的变化而刷新。
实现
子组件
export default class Image extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
let {
index,
deleteImage,
} = this.props;
return (
<div
className="upload-pic">
<span className="upload-pic-left"/>
<div className="upload-pic-right">
<img
className="upload-pic-thumbnail"
/>
<span className="upload-pic-mask"
onClick={deleteImage}
data-index={index}
/>
</div>
</div>
)
}
}
渲染组件：
render(){
let {
fileList
} = this.state;
return(
{
fileList.map((item, index) => {
return (
(
<Image
key={index}
index={index}
src={item[0].thumb}
alt={item[0].name}
deleteImage={this.deleteImage}/>
)
)
})
}
)
}
添加图片：
// 添加图片
addImage(e) {
let {
fileList
} = this.state;
e.preventDefault();
// 判断是否能上传
this.getUpload(e);
// 判断是否满足条件
if (isUploadSize && isUploadLengthLimit) {
fileList.push(globalFileObj);
this.setState({
fileList: fileList
});
} else {
console.log('失败');
}
};
鼠标事件
父组件代码如下：
// 鼠标移进
handleMouseOver(e) {
this.isShowMask(e,true);
}
// 鼠标移出
handleMouseOut(e) {
this.isShowMask(e,false);
}
// 是否显示遮罩层
isShowMask(e,bool){
e.preventDefault();
let index = e.currentTarget.getAttribute("data-index");
let {fileList} = this.state;
fileList[index].isHover = bool;
this.setState({
fileList: fileList
})
}
render(){
let {
fileList
} = this.state;
return(
{
fileList.map((item, index) => {
return (
(
<Image
key={index}
index={index}
src={item[0].thumb}
alt={item[0].name}
isHover={item.isHover}
handleMouseOver={this.handleMouseOver}
handleMouseOut={this.handleMouseOut}
deleteImage={this.deleteImage}/>
)
)
})
}
)
}
e.target和e.currentTarget的区别
此处需要注意一下e.target和e.currentTarget的区别，e.currentTarget指的是注册事件对象，e.target指的是实际触发事件对象，简单来说，当使用e.target的时候，虽然事件绑定在父级上，但是当经过子节点的时候，e.target指向子节点，而使用e.currentTarget,始终指向注册事件对象（此处为父节点）。
如何区分悬浮在哪个子组件上
当获取到每个子组件标示的data-index之后，利用fileList[index].isHover = false; 并将标识传给子组件（此处是isHover={item.isHover}），子组件再根据标识，做出一些特殊行为。
子组件代码如下：
export default class Image extends Component {
render() {
let {
src,
alt,
index,
deleteImage,
handleMouseOver,
handleMouseOut,
isHover
} = this.props;
return (
<div
className={`upload-pic ${isHover ? 'upload--mask' : ''}`}>
<span className="upload-pic-left"/>
<div className="upload-pic-right"
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
data-index={index}
>
<img
className="upload-pic-thumbnail"
src={src}
alt={alt}
/>
<span className="upload-pic-mask"
onClick={deleteImage}
data-index={index}
/>
</div>
</div>
)
}
}
删除图片：
使用splice(index,1)删除当前元素,改变原数组，且更新state
// 删除图片
deleteImage(e) {
e.preventDefault();
let {fileList} = this.state;
let index = e.target.getAttribute("data-index");
fileList.splice(index, 1);
this.setState({
fileList: fileList
})
}
