<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 核心 -->
<script src="../build/react.min.js"></script>
<!-- 渲染dom -->
<script src="../build/react-dom.min.js"></script>
<!-- 把jsx、es6转换成js、es5 -->
<script src="../build/browser.min.js"></script>
<script src="fetch-jsonp.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.header{
position: fixed;left: 0;top: 0;height: 44px;border-bottom: 1px solid #ccc; text-align: center;width: 100%;line-height: 44px;
}
.footer{
position: fixed;left: 0;bottom: 0;height: 44px;border-top: 1px solid #ccc; width: 100%;line-height: 44px;
list-style: none;
}
.footer li{
float: left;width: 25%;text-align: center;
}
.content{
padding-top: 45px;padding-bottom: 45px;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
var Header = React.createClass({
render:function () {
return <div className="header">首页</div>
}
});
var Footer = React.createClass({
render:function () {
return (
<ul className="footer">
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
)
}
});
var Content = React.createClass({
render:function () {
return <div className="content">{this.props.children}</div>
}
});
var List = React.createClass({
render:function () {
return (
<ul>
{this.props.listData.map(function (ele,index) {
return (
<li key={index}>
<img src={ele.goodsListImg}/>
<p>{ele.goodsName}</p>
</li>
)
})}
</ul>
)
}
});
var IndexPage = React.createClass({
//顶层组件去管理数据，需要用state去存储数据
getInitialState:function () {
return {
listData:[]
}
},
render:function () {
// 把自己的数据传递给子组件
return (
<div>
<Header/>
<Content>
<List listData={this.state.listData}/>
</Content>
<Footer/>
</div>
)
},
componentDidMount:function () {
//获取真实数据
//fetch基于es6的promise
fetchJsonp(" http://datainfo.duapp.com/shopdata/getGoods.php").then((res)=>res.json()).then((data)=>{
//改变自己的状态
this.setState({
listData:data
})
});
}
});
ReactDOM.render(<IndexPage/>,document.getElementById("root"))
//state是状态，用来存储数据的用setState修改，props是属性，是不能改的，父组件在调用时候传递来的，不能修改父组件传来的属性
//一个用来传递数据的，一个用来存储数据的（自己不能改）
</script>
</html>
显示密码demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 核心 -->
<script src="../build/react.min.js"></script>
<!-- 渲染dom -->
<script src="../build/react-dom.min.js"></script>
<!-- 把jsx、es6转换成js、es5 -->
<script src="../build/browser.min.js"></script>
<script src="fetch-jsonp.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.header{
position: fixed;left: 0;top: 0;height: 44px;border-bottom: 1px solid #ccc; text-align: center;width: 100%;line-height: 44px;
}
.content{
padding-top: 45px;padding-bottom: 45px;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
var Header = React.createClass({
render:function () {
return <div className="header">{this.props.title}</div>
}
});
var Content = React.createClass({
render:function () {
return <div className="content">{this.props.children}</div>
}
});
var LoginPage = React.createClass({
//通过绑定state去控制显示内容，当修改state视图会自动更新
getInitialState:function () {
return{
showPassword:false,
username:'',
password:''
}
},
changeShowPasswold:function () {
this.setState({
showPassword:!this.state.showPassword
})
},
changeUsername:function (ev) {
this.setState({
username:ev.target.value
})
},
changePassword:function (ev) {
this.setState(
{
password:ev.target.value
}
)
},
loginSubmit:function () {
//尽量避免操作真实dom
// var username = this.refs.username.value;
// var password = this.refs.password.value;
// console.log(username,password)
},
render:function () {
const {showPassword,username,password} = this.state
return (
<div>
<Header title="登录"/>
<Content>
<ul className="login-list">
<li>
<input ref="username" type="text" placeholder="用户名" onChange={this.changeUsername} value={username}/>
</li>
<li>
<input ref="password" type={showPassword?"text":"password"} placeholder="密码" onChange={this.changePassword} value={password}/>
</li>
<li>
<input type="checkbox" onChange={this.changeShowPasswold} /> 显示密码
</li>
<li>
<input value="登录" type="button" onClick={this.loginSubmit}/>
</li>
</ul>
</Content>
</div>
)
}
});
ReactDOM.render(<LoginPage/>,document.getElementById("root"))
//state是状态，用来存储数据的用setState修改，props是属性，是不能改的，父组件在调用时候传递来的，不能修改父组件传来的属性
//一个用来传递数据的，一个用来存储数据的（自己不能改）
</script>
</html>
