使用带有react-final形式的antd的react-input-mask

Question

我想将react-input-mask中的Input与Ant Design react-final-form一起使用。为了将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示例。

我只能使用带有input（输入1）或没有屏蔽（输入2）的InputMask的常规antd input。

如何将InputMask添加到antd input？

Answer 1

我从没有使用过这两个库，但是您可能想将format-string-by-pattern与react-final-form的内置解析和格式化功能一起使用来实现类似的目的。

我敢打赌，您可以很容易地将redux-form-antd个组件放入此处...

Answer 2

我设法在没有任何外部库的情况下将# -*- coding: utf-8 -*- import scrapy import csv class AppsSpider(scrapy.Spider): def start_requests(self): with open('data.csv', mode='r', encoding='utf-8') as file: rows = csv.reader(file) for row in rows: url = row[0] title = row[1] developer = row[2] price = row[3] desc = row[4] rating = row[5] items = { 'url': url, 'title': title, 'developer': developer, 'price': price, 'desc': desc, 'rating': rating } yield scrapy.Request(None, meta=items, dont_filter=True, callback=self.parse_it) def parse_it(self, response): url = response.meta['url'] title = response.meta['title'] developer = response.meta['developer'] price = response.meta['price'] desc = response.meta['desc'] rating = response.meta['rating'] if int(rating) > 4: parse_items = { 'url': url, 'title': title, 'developer': developer, 'price': price, 'desc': desc, 'rating': rating } yield parse_items 与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; 的{​​{1}}道具：

component

这里是codesandbox示例的链接。