[React]バリデーション

Reactでバリデーションを行う時に使うライブラリReact Hook Form

React Hook Form - performant, flexible and extensible form library

これを使うとバリデーションが簡単みたい。

使い方はこんな感じ

import { useForm } from 'react-hook-form'

export const Login = () => {

　　const { register, handleSubmit,  errors } = useForm();
　　const onSubmit = data => console.log(data);

    return (		
       <div className={classes.outer}>
           <form onSubmit={handleSubmit(onSubmit)}>
               <h1>ログイン</h1>
               <div className={classes.card}>            
                   <p>メールアドレス</p>
                   <TextField
                       type="text"
                       value={mail}
                       onChange={inputMail}
                       name="email"
                       inputRef={register({
                           required: "Required",
                           pattern: {
                               value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                               message: "invalid email address"
                           }
                       })}
                   />
                   {errors.email && errors.email.message}
                   <p>パスワード</p>
                   <TextField
                       name="password"
                       type="password"
                       value={password}
                       onChange={inputPassword}
                       inputRef={register({
                           required: "You must specify a password",
                           minLength: {
                               value: 8,
                               message: "Password must have at least 8 characters"
                           }
                       })}
                   />
                   {errors.password && <p>{errors.password.message}</p>}
               </div>
               <Button
                   variant="contained" color="primary"          
                   onClick={pushLoginBtn} 
                   type="submit"
               >ログインする</Button>
           </form>

       </div>
   );
}

バリデーションを行う箇所をformで囲う。コンポーネントに名前を指定しrefを設定する。すぐ下に{errors.email && errors.email.message}こんな感じで含める。このときのemailはコンポーネントに指定した名前。Buttonのタイプをsubmitにする。

Material UIのコンポーネントで使用するにはrefをinputRefにする。