React练习 15：02_09_单一按钮显示隐藏

在线效果浏览

需求：点击按钮显示/隐藏歌曲列表

解析：切换class

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

function Playlist(){
    const [isOpen,setOpen]=useState(true);
    const [styles,setStyles]=useState({display:'block'});
    const handleClick=function(isOpen,styles){
        setOpen(!isOpen);
        var newstyles={};
        newstyles.display= styles.display==='none' ? 'block' : 'none';
        setStyles(newstyles);
        
    }
    return(
        <div id="outer">
            <h2 className={isOpen ? '' : 'open'} onClick={()=>handleClick(isOpen,styles)}>播放列表...</h2>
            <ul style={styles} >
                <li><a href="#">玩家之徒 - 蔡依林</a></li>
                <li><a href="#">原谅我就是这样的女生 - 戴佩妮</a></li>
                <li><a href="#">猜不透 - 丁当</a></li>
                <li><a href="#">自导自演 - 周杰伦</a></li>
                <li><a href="#">浪漫窝 - 弦子</a></li>
                <li><a href="#">流年 - 王菲</a></li>
            </ul>
        </div>
    );
}

ReactDOM.render(
    <Playlist/>,
    document.getElementById('root')
)