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

猜你喜欢

转载自www.cnblogs.com/sx00xs/p/11828176.html