從 0 到 1 實現 react - onChange 事件以及受控組件

dongxiawu 發布于2019-08-23 12:02 / 2856人閱讀

摘要：比如它目前事件其實對應著原生事件中的事件。在這個中明確了未來會使用事件替代事件，并且會大幅度地簡化合成事件。效果如下至此，模擬了受控組件的實現。

該系列文章在實現 cpreact 的同時理順 React 框架的核心內容

項目地址

從一個疑問點開始

接上一章 HOC 探索拋出的問題 ———— react 中的 onChange 事件和原生 DOM 事件中的 onchange 表現不一致，舉例說明如下：

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

  onChange(e) {
    console.log("鍵盤松開立刻執行")
  }

  render() {
    return (
      
    )
  }
}

/*--------------分割線---------------*/

// 原生 DOM 事件中的 onchange 事件：
document.getElementById("test").addEventListener("change", (e) => {
  console.log("鍵盤松開以后還需按下回車鍵或者點下鼠標才會觸發")
})

撥云見霧

我們來看下 React 的一個 issue React Fire: Modernizing React DOM。有兩點信息和這篇文章的話題相關。

Drastically simplify the event system

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

從這兩點內容我們可以得知下面的信息：

React 實現了一套合成事件機制，也就是它的事件機制和原生事件間會有不同。比如它目前 onChange 事件其實對應著原生事件中的 input 事件。在這個 issue 中明確了未來會使用 onInput 事件替代 onChange 事件，并且會大幅度地簡化合成事件。

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

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

自由組件以及受控組件

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

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

case3 的情形即為簡化版的受控組件。

受控組件的實現

題目可以換個問法：當 input 的傳入屬性為 value 時(且沒有 onChange 屬性)，如何禁用用戶的輸入事件的同時又能獲取焦點?

首先想到了 html 自帶屬性 readonly、disable，它們都能禁止用戶的輸入，但是它們不能滿足獲取焦點這個條件。結合前文 onChange 的實現是監聽 input 事件，代碼分為以下兩種情況：

1.dom 節點包含 value 屬性、onChange 屬性
2.dom 節點包含 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
    })
    ...
  }
  ...
}

可以發現它們的核心都在這段代碼上：

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

區別是當有 onChange 屬性 時，能提供相應的回調函數 changeCb 通過事件循環機制改變表單的值。看如下兩個例子的比較：

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 函數即上個段落所謂的 changeCb 函數，通過 setState 的事件循環機制改變表單的值。

效果如下：

至此，模擬了受控組件的實現。

云服務器 GPU云服務器從0到1搭建視頻通話系統從0開始到1千萬用戶 onchange事件從1個想法到35萬活躍用戶

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97880.html

React中受控與非受控組件

摘要：首次發表在個人博客受控組件或都要綁定一個事件每當表單的狀態發生變化都會被寫入組件的中這種組件在中被稱為受控組件在受控組件中組件渲染出的狀態與它的或者向對應通過這種方式消除了組件的局部狀態是的應用的整個狀態可控官方同樣推薦使用受控表單組件總結首次發表在個人博客受控組件 { this.setState({ value: e.target.val...

wenhai.he 2019-08-22 11:16 評論0 收藏0
React深度編程：受控組件與非受控組件

摘要：受控組件與非受控組件在官網與國內網上的資料都不多，有些人覺得它可有可不有，也不在意。受控組件與非受控組件是處理表單的入口。認為不能單獨存在，需要與等控制的屬性或事件一起使用。它們共同構成受控組件，受控是受的控制。受控組件與非受控組件在官網與國內網上的資料都不多，有些人覺得它可有可不有，也不在意。這恰恰顯示React的威力，滿足不同規模大小的工程需求。譬如你只是做ListView這樣簡...

wpw 2019-08-22 11:20 評論0 收藏0
掌握react，這一篇就夠了

摘要：小明小明兒子，可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件，當一個表單的值是通過改變的而不是通過是受控組件，否則就是非受控組件。 react眾所周知的前端3大主流框架之一，由于出色的性能，完善的周邊設施風頭一時無兩。本文就帶大家一起掌握react。 jsx語法前端MVVM主流框架都有一套自己的模板處理方法，react則使用它獨特的jsx...

Enlightenment 2019-08-23 11:45 評論0 收藏0
翻譯 | 玩轉 React 表單 —— 受控組件詳解

摘要：受控輸入框只會顯示通過傳入的數據。例如，數組中的元素將會渲染三個單選框或復選框。屬性接收一個布爾值，用來表示組件是否應該被渲染成選中狀態。原文地址：React.js Forms: Controlled Components 原文作者：Loren Stewart 譯者：小 B0Y 校對者：珂珂君本文涵蓋以下受控組件：文本輸入框數字輸入框單選框復選框文本域下拉...

big_cat 2019-08-22 11:05 評論0 收藏0
翻譯 | 玩轉 React 表單 —— Refs 的運用

摘要：函數更新屬性，進而更新元素的值。由于箭頭函數存在于父組件中，所以中的指向父組件。一旦表單被提交，的值就被設置為。遺憾的是，沒有節點是包含了集合的。在這種情況下，這個節點列表包含三個節點和被選中的值。原文地址：React Forms: Using Refs 原文作者：Loren Stewart 譯者：萌萌校對者：小 boy React 提供了兩種從元素中獲取值的標準方法。第一...

gougoujiang 2019-08-20 19:03 評論0 收藏0