hoc修饰过后的Input组件在Form中的使用

1. 前置条件
   1. React@ V < 16.3
2. 需求
   1. 对Form表单中Input组件进行全部只读/局部只读状态设置
3. 解决方法

   1. context + hoc
      1.

      ```jsx
      import React, {createContext} from 'react'

      const defaultContext = {
      disabled: false,
      // setDisabled: () => {},
      }

      export const {Provider, Consumer} = createContext(defaultContext)

      const WithFormStatusHoc = (_component) => {
      const Component = _component
      return (props, ref) => {
      return (
      
      {({disabled}) => (
      

      
      <Component disabled={disabled} {...props} />
      
      
      )}
      
      )
      }
      }

      export default WithFormStatusHoc
      ```

   2. hoc修饰
      1.

      ```jsx
      import {Col, Row, Form, Card, Input as AntInput, Select as AntSelect} from 'antd'

      const {Option} = AntSelect
      const Input = forwardRef(WithFormStatusHoc(AntInput))
      const Select = forwardRef(WithFormStatusHoc(AntSelect))
      ```

   3. 通过 Provider 来设置 hoc在表单中生效的范围

4. 关注点
   1. 经hoc修饰后的组件为自定义控件,需要forwardRef来传递ref