react高階組件小demo-受控組件轉換成非受控組件

高階組件的概念

高階組件是啥呢？就是一個接收組件做爲參數，並返回一個帶有附加的屬性、方法的包裝後的組件。
它的做用就是讓具備相同功能的組件，可以不寫重複代碼就複用這部分功能，同時這些組件又可以具備本身獨特的屬性和方法。這或許就是抽象的意思吧。

受控組件、非受控組件

react是單向數據流的，當給表單元素綁定了一個value，那麼就要給這個元素綁定一個onChange事件，在輸入的數據發生變化的時候，去改變value的值。也就是咱們看到的輸入框的值，實際上也是輸入-state.value發生改變-輸入框顯示改變，妥妥的單向數據流。
非受控組件就是不要給元素綁定一個value，直接在onChange事件裏面獲取表單的值。

class Input extends React.Component {
    constructor(props) {
        super(props);
        this.onInputEvent = this.onInputEvent.bind(this)
    }
    onInputEvent(event) {
        this.setState({
            value: event.target.value
        })
    }
    render() {
        return <input type="text" value={this.state.value} onChange={this.onInputEvent}/>
    }
}

高階組件封裝受控組件

從受控組件的代碼能夠看出來，若是頁面上有多個表單元素，那麼綁定一個value和onChange是全部表單元素共用的功能。因此咱們能夠把這部分抽出來做爲高階組件，返回一個高階組件包裹後的表單元素。

import React from "react"
function widthInput(WrappedComponent) {
    return class extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                value: ""
            }
            this.onInputEvent = this.onInputEvent.bind(this)
        }

        onInputEvent(event) {
            this.setState({
                value: event.target.value
            })
        }

        render() {
            const newProps = {
                value: this.state.value,
                onChange: this.onInputEvent
            }
            return <WrappedComponent {...this.props} {...newProps}/>
        }
    }
}

class InputComponent extends React.Component {
    render() {
        return <input type="text" {...this.props} />
    }
}

export default widthInput(InputComponent)