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)