從 0 到 1 實(shí)現(xiàn) react - onChange 事件以及受控組件

dongxiawu 發(fā)布于2019-08-23 12:02 / 2863人閱讀

摘要：比如它目前事件其實(shí)對(duì)應(yīng)著原生事件中的事件。在這個(gè)中明確了未來(lái)會(huì)使用事件替代事件，并且會(huì)大幅度地簡(jiǎn)化合成事件。效果如下至此，模擬了受控組件的實(shí)現(xiàn)。

該系列文章在實(shí)現(xiàn) cpreact 的同時(shí)理順 React 框架的核心內(nèi)容

項(xiàng)目地址

從一個(gè)疑問(wèn)點(diǎn)開(kāi)始

接上一章 HOC 探索拋出的問(wèn)題 ———— react 中的 onChange 事件和原生 DOM 事件中的 onchange 表現(xiàn)不一致，舉例說(shuō)明如下：

// React 中的 onChange 事件
class App extends Component {
  constructor(props) {
    super(props)
    this.onChange = this.onChange.bind(this)
  }

  onChange(e) {
    console.log("鍵盤(pán)松開(kāi)立刻執(zhí)行")
  }

  render() {
    return (
      
    )
  }
}

/*--------------分割線(xiàn)---------------*/

// 原生 DOM 事件中的 onchange 事件：
document.getElementById("test").addEventListener("change", (e) => {
  console.log("鍵盤(pán)松開(kāi)以后還需按下回車(chē)鍵或者點(diǎn)下鼠標(biāo)才會(huì)觸發(fā)")
})

撥云見(jiàn)霧

我們來(lái)看下 React 的一個(gè) issue React Fire: Modernizing React DOM。有兩點(diǎn)信息和這篇文章的話(huà)題相關(guān)。

Drastically simplify the event system

Migrate from onChange to onInput and don’t polyfill it for uncontrolled components

從這兩點(diǎn)內(nèi)容我們可以得知下面的信息：

React 實(shí)現(xiàn)了一套合成事件機(jī)制，也就是它的事件機(jī)制和原生事件間會(huì)有不同。比如它目前 onChange 事件其實(shí)對(duì)應(yīng)著原生事件中的 input 事件。在這個(gè) issue 中明確了未來(lái)會(huì)使用 onInput 事件替代 onChange 事件，并且會(huì)大幅度地簡(jiǎn)化合成事件。

有了以上信息后，我們對(duì) onChange 事件(將來(lái)的 onInput 事件)的代碼作如下更改：

function setAttribute(dom, attr, value) {
  ...
  if (attr.match(/onw+/)) {        // 處理事件的屬性:
    let eventName = attr.toLowerCase().substr(2)
    if (eventName === "change") { eventName = "input" } // 和現(xiàn)階段的 react 統(tǒng)一
    dom.addEventListener(eventName, value)
  }
  ...
}

自由組件以及受控組件

區(qū)分自由組件以及受控組件在于表單的值是否由 value 這個(gè)屬性控制，比較如下代碼：

const case1 = () =>                     // 此時(shí)輸入框內(nèi)可以隨意增減任意值
const case2 = () =>  // 此時(shí)輸入框內(nèi)顯示 123，能隨意增減值
const case3 = () =>         // 此時(shí)輸入框內(nèi)顯示 123，并且不能隨意增減值

case3 的情形即為簡(jiǎn)化版的受控組件。

受控組件的實(shí)現(xiàn)

題目可以換個(gè)問(wèn)法：當(dāng) input 的傳入屬性為 value 時(shí)(且沒(méi)有 onChange 屬性)，如何禁用用戶(hù)的輸入事件的同時(shí)又能獲取焦點(diǎn)?

首先想到了 html 自帶屬性 readonly、disable，它們都能禁止用戶(hù)的輸入，但是它們不能滿(mǎn)足獲取焦點(diǎn)這個(gè)條件。結(jié)合前文 onChange 的實(shí)現(xiàn)是監(jiān)聽(tīng) input 事件，代碼分為以下兩種情況：

1.dom 節(jié)點(diǎn)包含 value 屬性、onChange 屬性
2.dom 節(jié)點(diǎn)包含 value 屬性，不包含 onChange 屬性

代碼如下：

function vdomToDom(vdom) {
  ...
  if (vdom.attributes
    && vdom.attributes.hasOwnProperty("onChange")
    && vdom.attributes.hasOwnProperty("value")) { // 受控組件邏輯
      ...
      dom.addEventListener("input", (e) => {
        changeCb.call(this, e)
        dom.value = oldValue
      })
      ...
    }
  if (vdom.attributes
    && !vdom.attributes.hasOwnProperty("onChange")
    && vdom.attributes.hasOwnProperty("value")) { // 受控組件邏輯
    ...
    dom.addEventListener("input", (e) => {
      dom.value = oldValue
    })
    ...
  }
  ...
}

可以發(fā)現(xiàn)它們的核心都在這段代碼上：

dom.addEventListener("input", (e) => {
  changeCb.call(this, e)
  dom.value = oldValue
})

區(qū)別是當(dāng)有 onChange 屬性 時(shí)，能提供相應(yīng)的回調(diào)函數(shù) changeCb 通過(guò)事件循環(huán)機(jī)制改變表單的值。看如下兩個(gè)例子的比較：

const App = () =>

效果如下：

class App extends Component {
  constructor() {
    super()
    this.state = { num: 123 }
    this.change = this.change.bind(this)
  }

  change(e) {
    this.setState({
      num: e.target.value
    })
  }

  render() {
    return (
      
        
      
    )
  }
}

這段代碼中的 change 函數(shù)即上個(gè)段落所謂的 changeCb 函數(shù)，通過(guò) setState 的事件循環(huán)機(jī)制改變表單的值。

效果如下：

至此，模擬了受控組件的實(shí)現(xiàn)。