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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

效果如下：

 
从上面的代码和效果我们可以看出，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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

效果与上面一样。

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

效果如下：

（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);
  };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

效果如下：

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:"你说的对！！！"
    });
  };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

效果如下：

 
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:"你说的对！！！"
    });
  };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

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

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

http://es6.ruanyifeng.com/