React练习 12：02_06_鼠标移入移出改变图片透明度

在线效果浏览：

需求：mouseover图片时，透明度为100（即不透明，完全显示），mouseout，图片透明度减为30

解析：动态添加/移除类 current，用来修改其实opacity值

import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Changetransparent(props){
    const [lists,setLists]=useState(props.lists);
    const handleOver=function(list,index){
        var newList=[...lists];
        newList[index].isActive=true;
        setLists(newList);
    }
    const handleOut=function(list,index){
        var newList=[...lists];
        newList[index].isActive=false;
        setLists(newList);
    }
    const imgLists=lists.map((list,index)=>
    <li 
    key={list.src}
    onMouseOver={()=>handleOver(list,index)}
    onMouseOut={()=>handleOut(list,index)}
    className={list.isActive ? 'current' : ''}
    ><img alt="bmw" src={list.src}/></li>
    )
    return(
        <ul id="imgList">   
            {imgLists}
        </ul>
    )
}
const lists=[
    {src:require('./img/02/1.jpg'),isActive:false},
    {src:require('./img/02/2.jpg'),isActive:false},
    {src:require('./img/02/3.jpg'),isActive:false},
    {src:require('./img/02/4.jpg'),isActive:false},
    {src:require('./img/02/5.jpg'),isActive:false},
    {src:require('./img/02/6.jpg'),isActive:false},
    {src:require('./img/02/7.jpg'),isActive:false},
    {src:require('./img/02/8.jpg'),isActive:false},
    {src:require('./img/02/9.jpg'),isActive:false},
    {src:require('./img/02/10.jpg'),isActive:false},
    ]
ReactDOM.render(
    <Changetransparent lists={lists}/>,
    document.getElementById('root')
)