React JS的基本用法［ES5，纯前端写法］

Posted 2020-08-25 东方春

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React JS的基本用法［ES5，纯前端写法］相关的知识，希望对你有一定的参考价值。

参照：http://www.ruanyifeng.com/blog/2015/03/react.html

注意事项：1.必须放倒服务器上，在文件系统上无法运行

<!doctype html>

<head>
    <meta charset="utf-8">
    <script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="login.css" type="text/css" />
    <title>
        页面
    </title>
</head>
<body style="margin: auto">
<div id="root"></div>

<script type="text/babel" src="login.js"></script>

</body>
</html>

.login{
    background-color: red;
}

.header{
    height: 30px;
    background-color: gray;
}

.userRole{
    height:80px;
    background-color: lightcyan;
}
.userId{

}
.userPassword{

}

.submitButtonEnabled{
    color:blue;
}
.submitButtonDisabled{
    color: gray;
}

var Login = React.createClass({

    //props的类型和是否必须填写
    propTypes: {
        title: React.PropTypes.string.isRequired,
        role: React.PropTypes.string.isRequired,
    },

    getDefaultProps: function() {
        console.log("getDefaultProps");
        return {
            title: ‘默认title‘,
            role: ‘默认role‘,
        };
    },

    //初始化state
    getInitialState: function() {
        console.log("getInitialState");
        return {
            userId: ‘‘,
            userPassword: ‘‘,
            submitEnabled: false,
        };
    },

    componentWillMount: function () {
        console.log("componentWillMount");
        this.timer = setInterval(function () {
        }.bind(this), 100);
    },

    componentDidMount: function () {
        console.log("componentDidMount");
        this.timer = setInterval(function () {
        }.bind(this), 100);
    },

    componentWillUnmount:function () {
        console.log("componentWillUnmount");
        this.timer = setInterval(function () {
        }.bind(this), 100);
    },

    //event
    handleClickSubmit:function () {
        if(this.state.userId.length < 1 || this.state.userPassword.length < 1){
            return;
        }
        alert("submit");

        $.get("http://publicschool.sinaapp.com/test/test.php?name=jack", function(result) {
            console.log(result);
        }.bind(this));//绑定this后,`回调函数`才能使用`this`
    },
    handleChangeId:function () {
        this.setState({
            userId:this.refs._ref_userId.value,
            submitEnabled:this.refs._ref_userId.value.length > 0 && this.refs._ref_userPassword.value.length > 0,
        });
    },
    handleChangePassword:function () {
        this.setState({
            userPassword:this.refs._ref_userPassword.value,
            submitEnabled:this.refs._ref_userId.value.length > 0 && this.refs._ref_userPassword.value.length > 0,
        });
    },

    //渲染方法
    render: function () {
        return(
            <div className="login">
                <div className="header">
                    {this.props.title}
                </div>

                <div className="userRole">
                    {this.props.role}
                </div>

                <input className="userId" type="text" ref="_ref_userId" placeholder="用户名" onChange={this.handleChangeId} />
                <input className="userPassword" type="password" ref="_ref_userPassword" placeholder="密码" onChange={this.handleChangePassword} />

                <button type="button" onClick={this.handleClickSubmit}
                        className={this.state.submitEnabled?"submitButtonEnabled":"submitButtonDisabled"}>登录</button>
            </div>
        );
    },
});

ReactDOM.render(
    <Login title="我是标题" role="学生的家长"/>,
    document.getElementById(‘root‘)
);

以上是关于React JS的基本用法［ES5，纯前端写法］的主要内容，如果未能解决你的问题，请参考以下文章

总结 React 组件的三种写法及最佳实践

React/React Native 的ES5 ES6写法对照表

前端两大框架 vue 和 react 的区别

React/React Native 的ES5 ES6写法对照表