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(
        <div id="outer">
            <h2>名车车标展示-鼠标移过显示车标</h2>
            <ul>
                {lists.map((item,index)=>
                <li key={item.title}
                className={item.isActive ? 'zindex' : ''}>
                    <a href="#" title={item.title}
                    onMouseOver={()=>handleAover(index)}
                    onMouseOut={()=>handleAout(index)}
                    ><strong>{item.name}</strong>{item.val}</a>
                    <img
                    onMouseOver={()=>handleAover(index)}
                    onMouseOut={()=>handleAout(index)}
                    className={item.isActive ? 'current' : ''}
                    src={item.src}
                    alt={item.title}/>
                </li>
                )}
            </ul>
        </div>
    );
}

ReactDOM.render(
    <Tips lists={lists}/>,
    document.getElementById('root')
)