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 React.Component {
  state = {
    disabled: false
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <FormDisabledContext.Provider
          value={{
            disabled: this.state.disabled
          }}
        >
          <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              ...
            </Form.Item>
          </Form>
        </FormDisabledContext.Provider>
        <Checkbox onChange={this.setDisabled}>disabled</Checkbox>
      </div>
    );
  }
}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

export default WrappedNormalLoginForm;

Code By 辜老师