🍊

React Hook Form + Material UIでController使った時も同じようにエラー表示を出す

2020/11/27に公開

React

Material-UI

React Hook Form

tech

React Hook Formは外部の制御されたUIコンポーネントライブラリと組み合わせて使うことができます。このおかげで一瞬でデザイン整ったフォームが作れます。

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

return(
  <form onSubmit={handleSubmit(onSubmit)}>
    <TextField
      label="example1"
      fullWidth
      name="example1"
      inputRef={register({
        required: "required!"
      })}
      error={Boolean(errors.example1)}
      helperText={errors.example1 && errors.example1.message}
    />
    <Button type="submit" variant="contained" color="primary">
      submit
    </Button>
  </form>
)

バリデーションやエラーメッセージも複雑なカスタマイズなしで限りなくreact-hook-form準拠な書き方で対応できます。

<TextField />だけで完結出来る時は問題ないですが、そうでないケースも多々あります。
そういったときはControllerを使うことで柔軟に管理下に入れることが出来ます。

ただエラーメッセージとの連携で詰まってしまい少し困ったので解決した際のコードを共有しておきます。

const lists = [
  { id: 0, name: "" },
  { id: 1, name: "foo" },
  { id: 2, name: "bar" }
];
.
.
.
<Controller
  name="example2"
  control={control}
  rules={{ required: "required!" }}
  as={
    <TextField
      select
      label="example2"
      margin="normal"
      fullWidth
      id="select"
      error={Boolean(errors.example2)}
      helperText={errors.example2 && errors.example2.message}
    >
      {lists.map((list) => (
        <MenuItem value={list.name} key={list.id}>
          {list.name}
        </MenuItem>
      ))}
    </TextField>
  }
/>

解決したソース見ればrulesをController内に記述する以外は変わったことしてないなと思い、割と拍子抜けしました。。

サンプルコード

こちらからは以上です！

サンプルコード

Discussion