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') )