zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    UVA 10618 Tango Tango Insurrection
    UVA 10118 Free Candies
    HDU 1024 Max Sum Plus Plus
    POJ 1984 Navigation Nightmare
    CODEVS 3546 矩阵链乘法
    UVA 1625 Color Length
    UVA 1347 Tour
    UVA 437 The Tower of Babylon
    UVA 1622 Robot
    UVA127-"Accordian" Patience(模拟)
  • 原文地址:https://www.cnblogs.com/xukun588/p/9458670.html
Copyright © 2011-2022 走看看