在 react-final-form 中使用 react-input-mask 和 antd

Question

我想在 react-final-form 中将 react-input-mask 与 Ant Design Input 一起使用。为了将 antd 与 react-final-form 一起使用，我还必须安装 redux-form-antd。所以文件看起来像这样：

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "antd";
import { Form, Field } from "react-final-form";
import InputMask from "react-input-mask";
import { TextField } from "redux-form-antd";
import "antd/dist/antd.css";

const onSubmit = async values => {
  window.alert(JSON.stringify(values, 0, 2));
};

const Input = props => <InputMask {...props} />;

function App() {
  return (
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit, values }) => (
        <form onSubmit={handleSubmit}>
          <Field
            name="mask"
            parse={value =>
              value
                .replace(/\)/g, "")
                .replace(/\(/g, "")
                .replace(/-/g, "")
                .replace(/ /g, "")
            }
            render={({ input, meta }) => (
              <div>
                <label>mask phone</label>
                <Input mask="+7 (999) 999-99-99" {...input} />
                {meta.touched && meta.error && <span>{meta.error}</span>}
              </div>
            )}
          />
          <Field
            name="antd"
            component={TextField}
            label="antd phone"
            placeholder="Phone"
          />
          <Button className="submit-button" type="primary">
            Send
          </Button>
          <pre>{JSON.stringify(values, 0, 2)}</pre>
        </form>
      )}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个 codesandbox 示例。

我只能使用带 InputMask（输入 1）或不带面具的 antd input（输入 2）的常规 input。

如何将 InputMask 添加到 antd input？

Answer 1

我从未使用过这些库中的任何一个，但您可能想查看使用 format-string-by-pattern 和 react-final-form 的 built-in 解析和格式化功能来实现类似的事情.

我打赌你可以很容易地将 redux-form-antd 组件扔到这里...

Answer 2

我已经设法在没有任何外部库的情况下将 react-input-mask 与 antd 和 react-final-form 一起使用。

这是我的组件：

import React from "react";
import InputMask from "react-input-mask";
import { Input } from "antd";
import FormItem from "antd/lib/form/FormItem";

const MaskInput = props => {
  const { disabled, mask, label, meta, required } = props;
  return (
    <FormItem
      label={label}
      validateStatus={
        meta.touched ? (meta.error ? "error" : "success") : undefined
      }
      help={meta.touched ? (meta.error ? meta.error : undefined) : undefined}
      hasFeedback={meta.touched ? true : false}
      required={required}
    >
      <InputMask
        mask={mask}
        disabled={disabled}
        autoComplete="off"
        {...props.input}
      >
        <Input />
      </InputMask>
    </FormItem>
  );
};

export default MaskInput;

然后传给Field的component道具：

<Field
  name="phone"
  label="Phone"
  component={MaskInput}
  mask="+7 (999) 999-99-99"
  required
/>

这里是 link 到 codesandbox 的例子。

在 react-final-form 中使用 react-input-mask 和 antd

Use react-input-mask with antd in react-final-form

reactjs

antd

react-final-form