react+antd：全局设置form表单不可编辑

在做编辑页面的时候遇到一个需求是“在指定状态下内容不可编辑”

方案一：给每个<Input>、<Select>...添加disable属性

这种方案在form表单内容比较多的情况下可能不是很方便，所以辜老师帮我想了方案二

方案二：封装个组件全局设置disable，如下

封装一个高阶组件( ./Input )

import React, { useContext, createContext } from "react";

export const FormDisabledContext = createContext({
  disabled: false,
  setDisabled: () => {}
});

function CustomFormItemHoc(component) {
  const Component = component;
  return function CustomItem(props) {
    const { disabled } = useContext(FormDisabledContext);
    return <Component disabled={disabled} {...props} />;
  };
}

export default CustomFormItemHoc;

组件使用：

import React from "react";
import ReactDOM from "react-dom";
import {
  Form,
  Icon,
  Input as AntdInput,
  Button,
  Checkbox as AntdCheckbox
} from "antd";
import CustomFormItemHoc, { FormDisabledContext } from "./Input";

const Input = CustomFormItemHoc(AntdInput);
const Checkbox = CustomFormItemHoc(AntdCheckbox);

class NormalLoginForm extends  {
  state = {
    disabled: false
  };

  render() {
    const { getFieldDecorator } = ;
    return (
      <div>
        <
          value={{
            disabled: 
          }}
        >
          <Form onSubmit={} className="login-form">
            <>
              ...
            </>
          </Form>
        </>
        <Checkbox onChange={}>disabled</Checkbox>
      </div>
    );
  }
}

const WrappedNormalLoginForm = ()(NormalLoginForm);

export default WrappedNormalLoginForm;

Code By 辜老师