React练习 16：02_10_提示框效果

在线效果浏览

需求：mouseover时显示车标提示。

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

const lists=arrs;

function Tips(props){
    const [lists,setLists]=useState(props.lists);
    const handleAover=function(index){
        var newlists=[...lists];
        newlists[index].isActive=true;
        setLists(newlists);
    };
    const handleAout=function(index){
        var newlists=[...lists];
        newlists[index].isActive=false;
        setLists(newlists);
    };
    return(
        

            
名车车标展示-鼠标移过显示车标
            

                {lists.map((item,index)=>
                
{item.title}
                className={item.isActive ? 'zindex' : ''}>
                    {item.title}
                    onMouseOver={()=>handleAover(index)}
                    onMouseOut={()=>handleAout(index)}
                    >{item.name}{item.val}
                    <img
                    onMouseOver={()=>handleAover(index)}
                    onMouseOut={()=>handleAout(index)}
                    className={item.isActive ? 'current' : ''}
                    src={item.src}
                    alt={item.title}/>
                
                )}
            
        
    );
}

ReactDOM.render(
    ,
    document.getElementById('root')
)