⌨️
MaterialUIのTextFieldにinputタグのvalidationを適用する
はじめに
Material-UIが便利でつかってきたのですが、Formのvalidationについてhtml5のinputのvalidationを適用するにはどうすればよいのだろうと思って調べてみました。
バージョン等
React 17.0.3
material-ui/core 4.11.3
方針
結論から行くと、Material-UIのAPIに必要なものが全部出ていました。
inputPropsとinputRefの二つがinputに直接触れる機能なのでこれを使えばよいようです。
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が取れているので、このあたりもそのまま使えそうです。
Discussion