react.js从入门到精通（二）——变量的定义和初始化、事件的使用

变量的定义和初始化

1、变量的定义和初始化

（1）使用在构造函数中创建

代码如下：

import React,{ Component } from 'react' class Home extends Component { constructor(props) { super(props); this.state = { data:"js是世界上最好的语言" }; } render() { return ( <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}> {this.state.data} </div> ) } } export default Home

效果如下：

 
从上面的代码和效果我们可以看出，react.js的变量可以定义在state这个json对象中，接着把state这个json对象绑定在this上。 
调用方式是：在dom树中需要用到的地方以{this.state.}方式进行使用。

（2）在render中创建

代码如下：

import React,{ Component } from 'react' class Home extends Component { render() { let data="js是世界上最好的语言"; return ( <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}> {data} </div> ) } } export default Home

效果与上面一样。

2、事件的使用

web前端是通过事件去操作界面的，所以在开发的过程中会用到大量的事件，下面以点击事件为例。

（1）事件的定义和使用

代码如下：

import React,{ Component } from 'react' class Home extends Component { constructor(props) { super(props); this.state = { data:"js是世界上最好的语言" }; } render() { return ( <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click()}> {this.state.data} </div> ) } click=()=>{ alert("点到了!!!"); }; } export default Home

效果如下：

（2）方法中参数的引入

代码如下：

constructor(props) {
    super(props); this.state = { data:"js是世界上最好的语言" }; } render() { return ( <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click(this.state.data)}> {this.state.data} </div> ) } click=(data)=>{ alert(data); };

效果如下：

3、通过事件来操作变量值的变化

代码如下：

constructor(props) {
    super(props); this.state = { data:"js是世界上最好的语言" }; } render() { return ( <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click(this.state.data)}> {this.state.data} </div> ) } click=(data)=>{ this.setState({ data:"你说的对！！！" }); };

效果如下：

 
this.setState()作用是将state中的数据进行修改，同时刷新界面，修改this.state.中的对应变量的值。

4、自调用事件

代码如下：

constructor(props) {
    super(props); this.state = { data:"js是世界上最好的语言" }; } render() { return ( <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={this.click(this.state.data)}> {this.state.data} </div> ) } click=(data)=>{ this.setState({ data:"你说的对！！！" }); };

自调用事件：在界面加载的时候就自己执行了，不需要进行点击操作。

注意：以上代码都是以es6格式进行编写，如果不熟悉es6语法，请点击下方地址，进行学习。es6语法相对于es5语法更接近java语言，更加的严谨，也越来越受欢迎。

http://es6.ruanyifeng.com/