04 React事件 方法、React定义方法的几种方式 获取数据 改变数据 执行方法传值

一、React 事件

二、React 定义方法

import React, { Component } from "react";
import "../assets/css/index.css";


class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      msg:"我是一个home组件"
    };
  }

  run(){
    alert("我是一个run方法")
  }


  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>

        <button onClick={this.run}>执行方法--不用加(),加()是执行方法</button>

      </div>
    );
  }
}

export default Home;

三、React 方法改变this指向的三种方式—获取数据

3.1第一种方式

import React, { Component } from "react";
import "../assets/css/index.css";


class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      msg:"我是一个home组件"
    };
  }


  getDate(){
    alert(this.state.msg);
  }

  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        
        <br/>
        <br/>

        <button onClick={this.getDate.bind(this)}>获取数据--第一种改变this指向的方法</button>

      </div>
    );
  }
}

export default Home;

3.2第二种方式

import React, { Component } from "react";
import "../assets/css/index.css";


class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      message:"我是一个message"
    };

    this.getMessage = this.getMessage.bind(this);
  }


  getMessage(){
    alert(this.state.message);
  }

  render() {
    return (
      <div>
      
        <button onClick={this.getMessage}>
           获取数据--第二种改变this指向的方法</button>
           
      </div>
    );
  }
}

export default Home;

3.2第三种方式

import React, { Component } from "react";
import "../assets/css/index.css";


class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      username:"danke"
    };

  }



  // 箭头函数的this指的就是当前的上下文
  getName = ()=>{
    alert(this.state.username);
  }

  render() {
    return (
      <div>

        <button onClick={this.getName}>
           获取数据--第3种改变this指向的方法</button>

      </div>
    );
  }
}

export default Home;

四、setState改变数据

import React, { Component } from "react";
import "../assets/css/index.css";


class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      msg:"我是一个home组件",
    };


  }



  setDate = ()=> {
    //改变state的值
    this.setState({
      msg:"我是一个home组件  这是改变后的值"
    });
  }

  render() {
    return (
      <div>
		<h2>{this.state.msg}</h2>
		
        <button onClick={this.setDate}>
          改变state里面的值  
        </button>


      </div>
    );
  }
}

export default Home;

五、React 执行方法传值

报错

import React, { Component } from "react";
import "../assets/css/index.css";


class Home extends Component {
  //固定写法
  constructor(props) {
    super(props);

    this.state = {
      username:"danke"
    };


  }


  setName = (str)=> {
    this.setState({
      username:str
    });
  }

  render() {
    return (
      <div>

        <h2>{this.state.username}</h2>

        <button onClick={this.setName.bind(this,'张三')}>
          执行方法传值 
        </button>

      </div>
    );
  }
}

export default Home;