如何将模式应用于材质 ui 输入？答案

【问题标题】：How to apply a pattern to material ui input?如何将模式应用于材质 ui 输入？
【发布时间】：2018-09-04 05:05:55
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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
          />
        );
      }

然后将此作为道具传递给材质输入，并告诉它使用此屏蔽输入而不是其默认输入组件：

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

【讨论】：

【解决方案2】：

<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

【讨论】：