第三天：React中的事件

创建事件==》事件绑定==》事件传参==》事件对象==》事件传播==》各个库或者框架中的特殊方法

一、获取事件对象和传参:

如果使用的是直接调用形式 :  this.函数名  那么函数中的唯一的形参  就是事件对象

如果使用的是bind调用形式 :  this.函数名.bind(this,"参数1","参数n")   函数中的最后一个形参是事件对象

如果是调用的是箭头函数：(e)=>this.函数名(e,"参数2")    事件参数的位置由我们自己决定

今日练习代码:获取事件对象和传参

import { Component } from "react";

class Obj extends Component {
  constructor() {
    super();
  }
  //   fun(s, e) {
  //     console.log(s);
  //     console.log(e);//函数中的最后一个形参是事件对象
  //   }
  fun1(e, a, s, p) {
    console.log(e); //事件对象
    console.log(a); //2
    console.log(s); //3
    console.log(p); //4
  }
  render() {
    return (
      <div>
        {/* <button onClick={this.fun.bind("1", "2")}>点击获取事件对象</button> */}
        {/* 箭头函数形式获取事件对象 形参和打印结果是一一对应*/}
        <button onClick={(e) => this.fun1(e, 2, 3, 4)}>
          箭头函数形式获取事件对象
        </button>
      </div>
    );
  }
}
export default Obj;

二、事件传播：阻止默认事件和冒泡事件

今日练习代码:阻止默认事件和冒泡事件

import { Component } from "react";
import "../assets/contextmenu.css";
class Contextmenu extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <h1>阻止默认事件</h1>
        <div className="bigbox" onContextMenu={this.big}>
          <div className="smallbox" onContextMenu={this.small}></div>
        </div>
      </div>
    );
  }
  big(e) {
    console.log("bigbox");
    // 阻止默认事件 需要使用使用event.preventDefault()
    e.preventDefault();
  }
  small(e) {
    console.log("smallbox");
    // 阻止冒泡事件也同时阻止小盒子的冒泡事件
    e.preventDefault();
    e.stopPropagation();
  }
}
export default Contextmenu;

三、props传值   父传子   子传父

今日练习代码:父传子

父组件中:

import { Component } from "react";
import Son from "../component/son";
class Parent extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <h1>父组件</h1>
        {/* 父传子 在子组件中自定义属性和值传过去 在子组件用props接收*/}
        <Son a="我是父亲"></Son>
      </div>
    );
  }
  fun(){
    console.log(123);
  }
}
export default Parent;

子组件中:

import { Component } from "react";

class Son extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <h3>子组件</h3>
        {/* 接收到的父组件传过来的内容 */}
        <p>{this.props.a}</p>
      </div>
    );
  }
}
export default Son;

今日练习代码:子传父

子组件中:

import { Component } from "react";

class Son extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <h3>子组件</h3>
        {/* 接收到的父组件传过来的内容 */}
        <p>{this.props.a}</p>
        {/* 子传父  子组件必须触发父组件方法 */}
        <button onClick={()=>{this.props.person('我是儿子')}}>点击子传父</button>
      </div>
    );
  }
}
export default Son;

父组件中:

import { Component } from "react";
import Son from "../component/son";
class Parent extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <h1>父组件</h1>
        {/* 父传子 在子组件中自定义属性和值传过去 在子组件用props接收*/}
        <Son a="我是父亲" person={this.fun}></Son>
      </div>
    );
  }
  fun(e) {
    // 在父组件中使用事件对象接收 子组件传过来的内容
    console.log(e); //我是儿子
  }
}
export default Parent;

四、登录案例

今日练习代码:

import { Component } from "react";

class Login extends Component {
  constructor() {
    super();
    this.state = {
      user: {
        username: "",
        password: "",
      },
    };
  }
  render() {
    // 解构赋值
    let { username, password } = this.state.user;
    return (
      <div>
        <h1>登录页</h1>
        <p>
          账号 :{" "}
          <input
            type="text"
            value={username}
            onChange={(e) => this.change(e, "username")}
          />
        </p>
        <p>
          密码 :{" "}
          <input
            type="text"
            value={password}
            onChange={(e) => this.change(e, "password")}
          />
        </p>
        <button onClick={() => this.login()}>登录</button>
      </div>
    );
  }
  change(e, type) {
    // console.log(type);
    // console.log(e);
    this.setState({
      user: {
        ...this.state.user,
        [type]: e.target.value,
      },
    });
  }
  login() {
    console.log(this.state.user);
  }
}
export default Login;