React 進階（四）事件詳解

難忘記發表於2019-03-21
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接受一個回撥函式，而不是直接接收一個變數，接受回撥函式是為了在元件掛載和銷燬時重新呼叫，需要謹慎使用。

相關文章