如何将模式应用于材料ui输入？

Question

如何在不使用Input的情况下将正则表达式应用于onChange进行验证？

例如，如果我希望它接受正确的13位数字^(\d{13})?$有type="text"

<Input id="number" type="text" />

Answer 1

<MaskedInput
      {...other}
      ref={inputRef}
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      placeholderChar={'\u2000'}
      showMask
    />

您可以使用mask属性，以获取更多信息，请访问文档。

https://material-ui.com/demos/text-fields/#formatted-inputs

Answer 2

material ui，有一个名为inputProps的输入属性，它是一个可以传递你想要分配给输入元素本身的属性的对象，所以你可以给它{pattern：'your pattern'}它将被应用输入，作为第二种方式，你可以尝试这样的maskedInputs：

      function TextMaskCustom(props) {
        const { inputRef, ...other } = props;

        return (
          <MaskedInput
            {...other}
            ref={inputRef}
            mask={[
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/
            ]}
            placeholderChar={"\u0000"}
            showMask
          />
        );
      }

然后将其作为prop传递给材质输入并告诉它使用此蒙版输入而不是其默认输入组件：

      <Input
        value={textmask}
        onChange={this.handleChange("textmask")}
        id="formatted-text-mask-input"
        inputComponent={TextMaskCustom}
      />