React练习 14：02_08_简易js年历

在线效果浏览

需求：日历，mouseover后会显示当月节日。

解析：设置state，注册mouseover事件，and so on...

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

function Calendar(props){
    const [arrs,setCalendar]=useState(props.arrs);
    const [mon,setMon]=useState(6);
    const [co,setCo]=useState('端午节：6月4日至6日放假3天。');

    const handleOver=function(id){
        for(var i=0;i<arrs.length;i++) arrs[i].isActive=false;
        arrs[id].isActive=true;
        setMon(arrs[id].id+1);
        setCo(arrs[id].message);
    };
    return(
        <div id="calendar">
            <ul>
                {arrs.map((item)=>
<li key={item.id} className={item.isActive ? 'current' : ''} onMouseOver={()=>handleOver(item.id)}><strong>{item.id+1}</strong>{item.val}</li>
                )}
            </ul>
            <div id="msg">
                <h2>
                    <span>{mon}</span>
                    月节日
                </h2>
                <p>{co}</p>
            </div>
        </div>
    );
}

const arrs=calendar;


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