标签：button php initial 系统 min color eve tde class
参照：http://www.ruanyifeng.com/blog/2015/03/react.html
注意事项：1.必须放倒服务器上，在文件系统上无法运行
login.html
<!doctype html>
<head>
<meta charset="utf-8">
<script src="https://npmcdn.com/react@15.3.1/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/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.css
.login{
background-color: red;
}
.header{
height: 30px;
background-color: gray;
}
.userRole{
height:80px;
background-color: lightcyan;
}
.userId{
}
.userPassword{
}
.submitButtonEnabled{
color:blue;
}
.submitButtonDisabled{
color: gray;
}
login.js
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‘)
);
标签：button php initial 系统 min color eve tde class
原文地址：http://www.cnblogs.com/dongfangchun/p/6237184.html
