Как применить шаблон к вводу материала?

Question

Как применить шаблон регулярного выражения к Input для проверки без использования onChange?

Например, если я хочу, чтобы он принимал ровно 13 цифр ^(\d{13})?$, имеющих type="text"

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

Answer 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}
      />

Answer 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 / текстовые поля / # отформатированные-входы