引言
在公司也写了一段时间的react代码,不过react环境都是已经搭好了,甚至组件都是已经写好了,只需要在一些函数内,定义一些逻辑,总体下来,觉得react的门都没有入,所有有了这篇文章。我打算主要从构建react开发环境开始,到遇到的问题,完成一个登陆的表单提交组件的编码,大概实现效果如下图,样式就不给了,下次自动登录,改成记住用户名,实现的原理是一样的。
环境搭建
在进行react的开发的时候需要做一下准备:
1、node的安装;
2、代码编辑器,刚开始我是使用idea去开发,发现对es6代码的解析的时候,会出现卡死的问题,有很多专业的前端开发编辑器,比如webstorm、sublime、EditPlus、notePad++等,我常使用的是webstorm,总体用起来,我还是觉得webstorm比较顺手;
3、脚手架安装,对于依赖的安装,如果用node的打包工具npm一个个安装的话,会很麻烦,所以选了一个官方的脚手架 create-react-app,基本的依赖环境都安装好了;
开始
从我们目标写的登陆表单,可以分成两个部分,一个是登陆按钮,另一个是输入框和记住密码选择框,我们先写输入框这部分,登陆按钮完全可以集成在父类中,先上我写的输入框和记住密码的代码:
import React, {Component} from 'react';
class InputComponet extends Component{
constructor(props){
super(props);
this.setName = this.setName.bind(this);
this.setPassword = this.setPassword.bind(this);
this.setIsRemember = this.setIsRemember.bind(this);
this.onUpdate = this.onUpdate.bind(this);
}
setName(){
this.onUpdate();
}
setPassword(){
this.onUpdate()
}
onUpdate(){
const name = this.refs.name.value;
const password = this.refs.password.value;
const isRemember = this.refs.isRemember.checked;
this.props.postData(name,password,isRemember)
}
setIsRemember(){
this.onUpdate()
}
render(){
let {name,isRemember} = this.props;
return(
<div>
<label>
姓名:<input type="text" ref="name" onChange={this.setName} defaultValue={this.props.name}/>
</label>
<label>
密码:<input type="password" ref="password" onChange={this.setPassword}/>
</label>
<label>
记住登陆账号<input type="checkbox" ref="isRemember" onChange={this.setIsRemember} checked={this.props.isRemember}/>
</label>
</div>
)
}
}
export default InputComponet
需要注意的一下几点:
1、组件必须要继承自Component,不然会在父组件中无法引入的;
2、组件的方法必须在构造函数内进行this绑定,es6默认是不进行this绑定的,如果没有进行这一步的话,方法内的this.setState是无法使用的,因为this并非当前组件;
3、各个组件要有ref属性,方便需要获取组件内的属性使用,可以通过this.refs.命名的ref 来回去组件对象
4、如果引用函数的时候,没有加this就会报错(如下图),例如我在代码中之前使用,引用onUpdate的时候,不是用this.onUpdate()去调用的,而是用onUpdate()调用的。
父组件的代码如下:
import React, {Component} from 'react';
import MyInput from './MyInput'
class LoginApp extends Component{
constructor(props){
super(props);
this.login = this.login.bind(this);
this.toPost = this.toPost.bind(this);
this.state = {
name:window.localStorage.getItem("name"),
password:"",
isRemember:window.localStorage.getItem("isRemember")
}
}
login(){
const {isRemember,name} = this.state;
if(isRemember) {
window.localStorage.setItem("name",name);
window.localStorage.setItem("isRemember",isRemember)
} else {
window.localStorage.removeItem("name");
window.localStorage.removeItem("isRemember");
}
//登陆的逻辑写在这边
alert(this.state.name + ",你好!你已经登陆了,你的密码是:" + this.state.password );
}
toPost(name,password,isRemember){
console.info(this.state)
this.setState({
name:name,
password:password,
isRemember:isRemember
})
console.info(this.state)
}
render(){
return(
<div>
<MyInput postData={this.toPost} name={this.state.name} password={this.state.password} isRemember={this.state.isRemember}/>
<button onClick={this.login}>登陆</button>
</div>
)
}
}
export default LoginApp
为了实现,子组件的状态存在父组件这边,方便提交,在父组件这边实现了一个toPost传给子组件,把子组件的状态传给父组件,当然这种实现是不提倡的,react推崇的是数据的单向流转。
使用子类传状态给父类,也看出来了代码会很容易,子类的状态会在父类重现一遍,如果父类有很多子组件,那状态维护起来就很恐怖了。
结束
使用react的方便性不用说,像我们这种Java是日常开发的语言,对于react的这种形式是非常熟悉,本文只是基础的入门,对react的思想执行并不到位,读者可以权当一个helloworld去理解,更深的思想实现要再多探索。
后记
最近读了官方的react文档,在文档的例子中也有一个和本文类似的例子,从对比中可以发现,本文的状态并没有进行提升管理,这点是做了修改。入门的同学可以看一下官方的文档(http://www.css88.com/react/docs/add-react-to-an-existing-app.html),毕竟是官方的,写的也比较全面。