React 进阶（四）事件详解

自由组件与受控组件

自由组件是指值不受Reactstate控制的form元素，而受控组件指的是值被Reactstate所控制的form元素

import React, {Component} from "react";
import "./App.css";
// import PropTypes from 'prop-types';
class ControllerComponent extends Component {
  constructor(){
    super();
    this.state = {
      name: "",
      id: ""
    }
  }
  handelChange = event =>{
    console.log(event.nativeEvent);
    console.log(event.target);
    this.setState({
      [event.target.name]:event.target.value
    })
  }
  render(){
    return (
      <div>
        <label htmlFor="#name">姓</label>
        <input name="name" value={this.state.name} onChange={this.handelChange} type="text" id="name"></input><br/>
        <label htmlFor="#id">名</label>
        <input name="id" value={this.state.id} onChange={this.handelChange} type="text" id="id"></input>
        <br/>
        <button onClick={console.log(this.state)}>Click</button>
      </div>
    )
  }
}
class App extends Component {
  constructor(){
    super();
    this.state = {

    }
  }
  render(){
    return (<div>
      <ControllerComponent></ControllerComponent>
    </div>)
  }
}
export default App;

Event

React中的Event是官方经过处理的合成事件，所以在使用时我们可以忽略一部分的兼容问题，值得注意的是，Event时全局唯一的事件处理器，当我们需要在非同步情况下使用event时需要格外注意，因为Event使用完都会被置空，所以在setTimeout等非同步操作下无法正常获取Event

• 官网上的说法是Event是被池化的，也就是被循环使用的，当每次回调函数执行完成都会置空event，这就导致当你在异步中调用event时是无法使用的，因为event是object，是引用数据类型，堆中存放着对象，而栈中只是存着一个地址，当回调函数结束给清空时，我们在异步函数中自然而然就取不到值了。

handelClick = event=> {
    console.log(event);
    const _event = Object.assign({}, event)
    event.persist()
    setTimeout(() => {
      console.log(event)
      console.log(_event);
    }, 100);
  }

ref 操作DOM，不得不使用的命令式操作

ref接受一个回调函数，而不是直接接收一个变量，接受回调函数是为了在组件挂载和销毁时重新调用，需要谨慎使用。