05 React 键盘事件 表单事件 事件对象 以及 React中ref获取dom节点 、 React实现类似vue的双向数据绑定

一、React 事件对象

在出发DOM上的某个事件，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。

二、React 获取dom节点

2.1第一种获取方式

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


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

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

    };

  }

  run = (event)=> {
    // alert(this.state.msg)

    // console.log(event)


    //alert(event.target);//获取执行事件的dom节点
  
    event.target.style.background = 'red';

    //获取dom的属性
    console.log(event.target.getAttribute('aid'))
  }

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

        {/* 事件对象 */}

        <h2>事件对象演示</h2>

        <button  aid="123"  onClick={this.run}>事件对象</button>

        <br/> <hr/>
      </div>
    );
  }
}

export default Home;

三、获取input框的值–方法一

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

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

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

  }



  inputChange = (e) => {
    // console.log("1111")

    //获取表单的值
    // console.log(e.target.value);

    this.setState({
      username:e.target.value
    });
  }

  getInput = ()=>{
    console.log(this.state.username)
  }

  render() {
    return (
      <div>

        <h2>表单事件</h2>

        {/* 

        获取表单的值：
          1.监听表单的改变事件                             onChange
          
          2.在改变的事件里面获取表单输入的值                e.target.value
          
          3.把表单输入的值复制给 username                  this.setState({});
          
          4.点击按钮的时候获取 state里面的username         this.state.username

        */}
        <input onChange={this.inputChange}/> 
        <button onClick={this.getInput}>
          获取input的值
        </button>

      </div>
    );
  }
}

export default Home;

四、获取input框的值–方法二

import React, { Component } from "react";

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
    };
  }

  inputChange = (e) => {
    /*
    获取dom节点
        1.给元素定义ref属性
        
        <input ref="username" />
        
        2.通过this.refs.username 获取dom节点
        
   */

    let val = this.refs.nameNode.value;

    this.setState({
      username: val,
    });
  };

  getInput = () => {
    console.log(this.state.username);
  };

  render() {
    return (
      <div>
        <h2>表单事件</h2>

        {/* 

        获取表单的值：
        
        1.监听表单的改变事件                             onChange
        
        2.在改变的事件里面获取表单输入的值                ref获取
        
        3.把表单输入的值复制给 username                  this.setState({});
        
        4.点击按钮的时候获取 state里面的username         this.state.username

        */}
        <input ref='nameNode' onChange={this.inputChange} />
        <button onClick={this.getInput}>获取input的值</button>
      </div>
    );
  }
}

export default List;

关于报错：
在React 16.3版本后，使用React.createRef()来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例。

例子：
class Counter extends Component {
    constructor() {
        super()
        this.state ={sum:0,number:0}
        this.myRef = React.createRef();
    }
    change = () =>{
        this.setState({...this.state,sum: Number(this.textInput.value) + Number(this.myRef.current.value)})
    }
    componentDidMount(){
        console.log(this.myRef.current.value);
    }
    render() {
        return (
            <div onChange ={this.change} >
                <input type="text" ref={(input)=>{this.textInput=input}} />+ 
                <input  type ="text" ref={this.myRef} /> = {this.state.sum}
            </div>
            
        )
    }
}

修改后的代码

import React, { Component } from "react";

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
    };
    this.myRef = React.createRef();
  }

  inputChange = (e) => {
    let val = this.myRef.current.value;

    this.setState({
      username: val,
    });
  };

  getInput = () => {
    console.log(this.state.username);
  };

  render() {
    return (
      <div>
        <h2>表单事件</h2>

        <input ref={this.myRef} onChange={this.inputChange} />

        <button onClick={this.getInput}>获取input的值</button>
      </div>
    );
  }
}

export default List;

五、双向数据绑定

import React from "react";

class Todolist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "111",
    };
  }

  // view改变反过来影响model 
  inputChange = (e) => {
    this.setState({
      username: e.target.value,
    });
  };

  //model改变影响view
  setUsername = () => {
    this.setState({
      username:'李四'
    });
  };

  render() {
    return (
      <div>
        <h2>双向数据绑定</h2>

        {/* model改变影响view  view改变反过来影响model  */}

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

        <input value={this.state.username} onChange={this.inputChange} />

        <button onClick={this.setUsername}>改变username的值</button>
      </div>
    );
  }
}

export default Todolist;