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)