在没有 getFieldDecorator 的情况下使用带有 antd 的 react-input-mask

Question

我是 React 新手，我想使用 react-input-mask 和 antd 输入字段。如果我使用getFieldDecorator 和Form.create，一切正常。

在 inputmask.js 中：

const CustomInput = forwardRef((props, ref) => {
  return (
    <ReactInputMask {...props}>
      {inputProps => (
        <Input
          {...inputProps}
          ref={ref}
          disabled={props.disabled ? props.disabled : null}
        />
      )}
    </ReactInputMask>
  );
});

CustomInput.propTypes = {
  mask: PropTypes.string,
  maskChar: PropTypes.string,
  formatChars: PropTypes.object,
  alwaysShowMask: PropTypes.bool,
  inputRef: PropTypes.func
};

export default CustomInput;

在 index.js 中：

function FormBuilder(props) {
  const { getFieldDecorator } = props.form;

  return (
    <Form>
      <Form.Item label="Phone">
        {getFieldDecorator("phone", {
          rules: [{ required: true, message: "Phone is required." }]
        })(
          <CustomInput
            mask="+7 (999) 999-99-99"
            placeholder="+7 (___) ___-__-__"
          />
        )}
      </Form.Item>
      <Button htmlType="submit" type="primary">
        Send
      </Button>
    </Form>
  );
}

const App = Form.create({ name: "form" })(FormBuilder);

这里是demo。

但如果我删除 getFieldDecorator 和 Form.create（因为我将使用 react-final-form 并且我不需要它们），则掩码不起作用。

这是我的新 index.js 和 demo。

function App(props) {
  return (
    <Form>
      <Form.Item label="Phone">
        <CustomInput
            mask="+7 (999) 999-99-99"
            placeholder="+7 (___) ___-__-__"
          />
      </Form.Item>
      <Button htmlType="submit" type="primary">
        Send
      </Button>
    </Form>
  );
}

代码基本相同，但在第二个示例中，掩码不起作用。你能告诉我，我的错误在哪里吗？

Answer 1

getFieldDecorator API 管理它的表单字段values 为您。

如果你删除它，你需要自己管理它。

您可以通过仅渲染 CustomInput 来保证它，但它仍然无法像您一样工作。

function FormBuilder(props) {
  // Won't work
  return (
    <CustomInput mask="+7 (999) 999-99-99" placeholder="+7 (___) ___-__-__" />
  );
}

要修复它，如上所述，自己管理输入状态，for example：

function App(props) {
  const [value, setValue] = useState('');
  return (
    <Form>
      <Form.Item label="Phone">
        <CustomInput
          value={value}
          onChange={e => setValue(e.target.value)}
          mask="+7 (999) 999-99-99"
          placeholder="+7 (___) ___-__-__"
        />
      </Form.Item>
      <Button htmlType="submit" type="primary">
        Send
      </Button>
    </Form>
  );
}

注意事项：

1. 如果你使用其他form库，比如react-final-form，不要混合组件，比如在Form里面使用antd的Form.Item react-final-form，使用单个库，否则你会得到 意想不到的结果。
2. antd Form 是 rc-form 的一个实现，所以你可以使用它的扩展 api。
3. 当您使用 完整的 UI 库（如 antd）您需要一个很好的理由来使用其他组件时，请重新考虑是否真的需要 其他form 图书馆。