React练习 :百度输入法
需求:
点击显示输入法选择框,再次点击隐藏;点击close按钮,关闭输入法选择面板。
解析:设置isShow Boolean state,利用setShow来切换其显/隐。
import React,{useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function Inputmethod(){ const [isShow,setShow]=useState(false); return( <div id="outer"> <button onClick={()=>setShow(!isShow)}>输入法</button> <ul id="ime" className={isShow ? 'new' : ''}> <li><a href="#">手写</a></li> <li><a href="#">拼音</a></li> <li onClick={()=>setShow(false)} id="close"><a href="#">关闭</a></li> </ul> </div> ) } ReactDOM.render( <Inputmethod/>, document.getElementById('root') )