React学习进阶1
直接看代码和注释
react的事件比较麻烦
还有就是弄css的style感觉很繁琐
希望以后的学习让这个会好一点
优点：组件封装之后使用比较方便 而且逻辑上更好理解和常用
类似于我现在谁用的swt和swing组件 只不过更加的困难一点 因为智能提示更好
如果有bug 修改起来比较麻烦
ps:react 的注释和js的不一样
<head>
<meta charset="UTF-8">
<title>父子关系</title>
</head>
<body>
<script src="../react-0.13.2/build/react.js"></script>
<script src="../react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
/* React.createClass创建选择性别一个组件
*/
var GenderSelect = React.createClass({
/* 渲染这个组件 这个组件=return值、
* this.props.handleSelect用来调用上层的handleSelect事件方法
*this.props为使用自己的属性 调用此组件的实话 handleSelec函数为其一个属性
*/
render: function() {
return <select onChange={this.props.handleSelect}>
<option value="0">男</option>
<option value="1">女</option>
</select>
}
})
/* 这个组件是父组件
*/
var SignupForm = React.createClass({
/* 这个初始化阶段的方法 return的状态 State
*/
getInitialState: function() {
return {
name: '',
password: '',
gender: '',
}
},
/* 这是一个自定义事件 参数俩个
* event.target=触发的组件
*this 在触发的时候可以指定
*/
handleChange: function(name, event) {
var newState = {}
newState[name] = event.target.value
this.setState(newState)
},
/* 这是一个自定义事件
* 将this的key:gender 设为一个值
*/
handleSelect: function(event) {
this.setState({gender: event.target.value})
},
render: function() {
console.log(this.state)
return <form>
触发自己定义的 handleChange事件
this=组件本身
<input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this, 'name')} />
<input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this, 'password')} />
调用自定义的性别选择组件 handleSelect事件为他的一个函数
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
}
})
/*
*将父组件渲染到body中
*/
React.render(<SignupForm></SignupForm>, document.body);
</script>
</body>
