使用React写的一个小小的登录验证密码组件

哎,算了。直接上代码吧,不懂得私聊我把

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有条件的渲染</title>
    <script src="./bower_components/react/react.production.min.js"></script>
    <script src="bower_components/react/react-dom.production.min.js"></script>
    <script src="bower_components/babel/browser.js"></script>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/babel">
    function Info(props) {
        if(!props.open){
            return null
        }
        return (
                <p>{props.text}</p>
        )
    }
    class Login extends React.Component {
        constructor(props) {
            super(props);
            this.state = {text: "",resultText:"",open:false};
        }

        changeText(event) {
            this.setState({text: event.target.value})
        }

        changeStatus() {
            this.setState({open: true})
            if (!this.state.text) {
                this.setState({
                    resultText:"您还未登录"
                })
            } else if (this.state.text == "123456") {
                this.setState({
                    resultText:"您好,您已登录"
                    }
                )
            } else {
                this.setState({
                    resultText:"不好意思,密码错误"
                })
            }
        }
            render(){
            return (
                <div>
                       <input placeholad="请输入您的密码" type="text" value={this.state.text} onChange={e => this.changeText(e)}/>
                    <button onClick={this.changeStatus.bind(this)} >点击登录</button>
                    <Info text={this.state.resultText} open={this.state.open}></Info>
                </div>
            )
        }

    }
    ReactDOM.render(
            <Login/>,
        document.getElementById("test")
    )
</script>
</html>

  

  

原文地址:https://www.cnblogs.com/mmykdbc/p/8582885.html