React-图像处理事件

import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { imgPath: 'src/chapterOne/Assets/', imgEx: '.jpg', file1Name: 'car1-1', file2Name: 'car2-2', file3Name: 'car3-3', file4Name: 'car4-4', alertInfo: '加载图像',}/** * 图像onLoad事件处理函数 */function loadPic(){ alert(infoMap.alertInfo);}class Img extends React.Component { constructor(props) { super(props); this.state = { listImg: [ 'src/chapterOne/Assets/car1-1.jpg', 'src/chapterOne/Assets/car2-2.jpg', 'src/chapterOne/Assets/car3-3.jpg', 'src/chapterOne/Assets/car4-4.jpg', ], index: 0 } } // 计时器执行 indexChange(){ if (this.state.index == this.state.listImg.length-1){ this.setState({ index: 0 }) } else { this.setState({ index: this.state.index + 1 }) // 在浏览器Console中输出图片序号 console.log(this.state.index); } } componentDidMount() { setInterval(() => { this.indexChange(); }, 2000); } render() { let {listImg, index} = this.state; let imgList = listImg.map((item, imgIndex) => { return <img src={item} key={imgIndex} style={{'display':index == imgIndex ? 'block' : 'none'}}Name="img" onLoad={loadPic} /> }); let liList = listImg.map((item2, imgIndex2) => { return <li key={imgIndex2} style={{'listStyleType':index == imgIndex2?'initial':'circle'}}></li> }); return ( <div> {imgList} <div> <ul> {liList} </ul> </div> </div> ); }}const ImageEventExample = () => { return ( <span> <Img /> </span> );}export default ImageEventExample;

运行效果：