⌨️

MaterialUIのTextFieldにinputタグのvalidationを適用する

2021/04/10に公開約1,400字

はじめに

Material-UIが便利でつかってきたのですが、Formのvalidationについてhtml5のinputのvalidationを適用するにはどうすればよいのだろうと思って調べてみました。

バージョン等

React 17.0.3
material-ui/core 4.11.3

方針

結論から行くと、Material-UIのAPIに必要なものが全部出ていました。
inputPropsとinputRefの二つがinputに直接触れる機能なのでこれを使えばよいようです。

https://material-ui.com/api/text-field/
inputのRefをどうにかして手に入れようとuseRefをこねくりまわしたのですが・・・公式をさっさと読めばよかったです。。。

コード

こんな感じのコードを書いてみました。

export default function TextFieldsValidation() {
  const classes = useStyles();
  const inputRef = useRef(null);
  const [inputError, setInputError] = useState(false);

  const handleChange = () => {
    if (inputRef.current) {
      const ref = inputRef.current;
      if (!ref.validity.valid) {
        setInputError(true);
      } else {
        setInputError(false);
      }
    }
  };

  return (
    <form className={classes.root}>
      <TextField
        error={inputError}
        inputProps={{ maxLength: 4, pattern: "^[a-zA-Z0-9_]+$" }}
        inputRef={inputRef}
        defaultValue=""
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        helperText={inputRef?.current?.validationMessage}
        onChange={handleChange}
      />
    </form>
  );
}

挙動

inputのmaxlengthとpatternが設定できました。
4文字以上の入力はできず、patternで許可していない文字を入力するとこのようなエラーになるフォームになっています。

inputRefが取れているので、このあたりもそのまま使えそうです。

https://ja.reactjs.org/docs/uncontrolled-components.html

Discussion

ログインするとコメントできます