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

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

web端三大框架react、vue和angular,本篇教程介绍react的从入门到精通。


四、变量的定义和初始化


1、使用在构造函数中创建

代码如下:

import React, {Component} from 'react';
import logo from '../logo.svg';
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:"react是优秀的前端三大框架之一"
    };
  }
  render(){
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            准备起步
          </a>
         <span>{this.state.data}</span>
        </header>
      </div>
    );
  }
}
export default Home;


效果如下:


image.png

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


2、在render中创建

代码如下:


import React, {Component} from 'react';
import logo from '../logo.svg';
class Home extends Component {
  render(){
    let datatwo = "render:react是优秀的前端三大框架之一"
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            准备起步
          </a>
         <span>{datatwo}</span>
        </header>
      </div>
    );
  }
}
export default Home;


效果如下:

image.png


效果与上面一样。

五、事件的使用

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

1、事件的定义和使用

代码如下:

import React, {Component} from 'react';
import logo from '../logo.svg';
class Demo extends Component {
  render(){
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="#"
            rel="noopener noreferrer"
            onClick={()=>this.click()}
          >
           点击准备起步
          </a>
        </header>
      </div>
    );
  }
   click=()=>{
    alert("装载完毕!准备起飞");
  };
}
export default Demo;



效果如下:

image.png


2、方法中参数的引入

代码如下:


import React, {Component} from 'react';
import logo from '../logo.svg';
class Demo extends Component {
  render(){
    let data = "装载完毕!准备起飞!我是101"
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="#"
            rel="noopener noreferrer"
            onClick={()=>this.click(data)}
          >
           点击准备起步
          </a>
        </header>
      </div>
    );
  }
  click=(data)=>{
    alert(data);
  };
}
export default Demo;


效果如下:

image.png


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

代码如下:

import React, {Component} from 'react';
import logo from '../logo.svg';
class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:"render:react是优秀的前端三大框架之一"
    };
  }
  render(){
    let data = "装载完毕!准备起飞!我是101"
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="#"
            rel="noopener noreferrer"
            onClick={()=>this.click(this.state.data)}
          >
           点击准备起步==
        {this.state.data}
          </a>
        </header>
      </div>
    );
  }
   click=(data)=>{
    this.setState({
      data:"你说的对!!!"
    });
  };
}
export default Demo;



效果如下:

image.png

image.png


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


如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发,省掉安装的步骤

追梦猪react项目demo实例(https://github.com/jiawenguang/React-demo.git)

可以通过git clone方式下载项目结构。


追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容