React练习 ：百度输入法

Posted 2020-11-21 sx00xs

需求：

点击显示输入法选择框，再次点击隐藏；点击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‘)
)