时间戳

首页 > 解决方案 > 基于已定义掩码的 TextField 列表

reactjs - 基于已定义掩码的 TextField 列表

问题描述

我有这个组件可以输入一个 14 位数字。

       const [account, setAccount] = useState('');
       const handleAccountChange = (event) => { setAccount(event.target.value) }

        <TextField
            id="filter-by-account"
            label="Search by: account "
            variant="outlined"
            fullWidth
            value={account}
            onChange={handleAccountChange}
            InputProps={{ inputComponent: AccountNumberMask }}
       />

面具：

return (
    <MaskedInput
        {...other}
        ref={(ref) => {
            inputRef(ref ? ref.inputElement : null);
        }}
        mask={[/[1-9]/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/]}
        showMask
        onChange={() => { }}
        onBlur={() => { }}
    />
);

我需要将此组件更新为除了一个 14 位数字的列表，而不仅仅是一个。

文本字段示例：
在此处输入图像描述

感谢您的建议。

谢谢

标签： reactjsregexmaterial-ui

解决方案

作为正则表达式

/^\d{4} \d{4} \d{4} \d{2}$/g

mask={[/^\d{4} \d{4} \d{4} \d{2}$/]}

问题作者发表评论后更新

来自 material-ui 示例的工作示例

import * as React from "react";
import MaskedInput from "react-text-mask";
import { makeStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

const TextMaskCustom = React.forwardRef(function TextMaskCustom(props, ref) {
  const setRef = React.useCallback(
    (maskedInputRef) => {
      const value = maskedInputRef ? maskedInputRef.inputElement : null;

      if (typeof ref === "function") {
        ref(value);
      } else if (ref) {
        ref.current = value;
      }
    },
    [ref]
  );

  return (
    <MaskedInput
      {...props}
      ref={setRef}
      mask={[
        /\d/,
        /\d/,
        /\d/,
        /\d/,
        " ",
        /\d/,
        /\d/,
        /\d/,
        /\d/,
        " ",
        /\d/,
        /\d/,
        /\d/,
        /\d/,
        " ",
        /\d/,
        /\d/
      ]}
      placeholderChar={"\u2000"}
      showMask
    />
  );
});

export default function FormattedInputs() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    textmask: "1111 1111 1111 11",
    numberformat: "1320"
  });

  const handleChange = (event) => {
    setValues({
      ...values,
      [event.target.name]: event.target.value
    });
  };

  return (
    <div className={classes.root}>
      <FormControl>
        <InputLabel htmlFor="formatted-text-mask-input">
          react-text-mask
        </InputLabel>
        <Input
          value={values.textmask}
          onChange={handleChange}
          name="textmask"
          id="formatted-text-mask-input"
          inputComponent={TextMaskCustom}
        />
      </FormControl>
    </div>
  );
}

看起来react-text-mask正在分别检查每个值

mask={[
        /\d/,
        /\d/,
        /\d/,
        /\d/,
        " ",
        /\d/,
        /\d/,
        /\d/,
        /\d/,
        " ",
        /\d/,
        /\d/,
        /\d/,
        /\d/,
        " ",
        /\d/,
        /\d/
      ]}

推荐阅读