react状态的使用：实现一个文本框点击按钮之前是文本框点击以后变成密码框并且按钮的内容也改变

最新推荐文章于 2023-05-10 15:56:12 发布

像鱼一样的飞

最新推荐文章于 2023-05-10 15:56:12 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/qq_42915988/article/details/81534194

版权

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

    <div id="out"></div>

</body>
<script src="js/a1.js" type="text/babel" charset="utf-8"></script>
<!--引外部需在服务器环境下加载-->
</html>

class Demo extends React.Component{
    constructor(props){
        super(props)

        this.state={
            str:"shurukuang",
            str1:"text"
        }
    }
    tap(){
        console.log(this.state)

        if(this.state.str=="mima"){
            this.setState({
                str:"shurukuang",
                str1:"text"
            })
        }else{
            this.setState({
                str:"mima",
                str1:"password"
            })
        }
    }


    render(){
        return(
            <div>
                <h1>es6 需求－明文密码</h1>
                <input type={this.state.str1}/>
                <button onClick={this.tap.bind(this)} >{this.state.str}</button>
            </div>
        )
    }   
}
ReactDOM.render(<Demo/>,document.getElementById('out'))

像鱼一样的飞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react状态的使用：实现一个文本框点击按钮之前是文本框点击以后变成密码框并且按钮的内容也改变

html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;script src="../lib/react.min.js" type="text/javascript" c
复制链接

扫一扫