Question

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

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

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

Answer 1

<div style=width:100%;background:pink>
    fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
    <div style=width:60%;float:left>
        <img src=Library_left.jpg width=100%>
    </div>
    <div style=width:40%;float:right>
        <iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php">&nbsp;</iFrame>
    </div>
</div>
<div style=width:100%;background:yellow>
    <h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>

您可以使用<MaskedInput {...other} ref={inputRef} mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} placeholderChar={'\u2000'} showMask />属性，有关更多信息，请访问文档。

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

Answer 2

材料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}
      />

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

2 个答案: