需求:
点击显示输入法选择框,再次点击隐藏;点击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‘)
)
原文:https://www.cnblogs.com/sx00xs/p/11828176.html