码迷,mamicode.com
首页 > 其他好文 > 详细

React练习 :百度输入法

时间:2019-11-09 23:37:18      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:document   stat   选择   als   outer   百度   百度输入   put   ret   

需求:

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

 

React练习 :百度输入法

标签:document   stat   选择   als   outer   百度   百度输入   put   ret   

原文地址:https://www.cnblogs.com/sx00xs/p/11828176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!