🙄

【react-hooks-form 】Material UIを使用したとき、フォームの送信後に入力欄を空欄にする

2022/10/18に公開約1,900字

これは何か?

react-hooks-formとMaterial UIを使用した場合、フォームの送信後に入力欄を空欄(リセット)にする方法を書いた記事です。UIライブラリを使用した場合、フォーム送信後の入力欄を空欄するのに少し手こずったので記事にしてみました。

実装

App.jsx
import "./styles.css";
import { TextField, Button } from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";

export default function App() {
  const { handleSubmit, control, reset } = useForm({
    defaultValues: {
      title: ""
    }
  });

  const handleOutput = (data) => {
    console.log(data.title);
    reset();
  };

  return (
    <div className="App">
      <h2>フォーム送信後にテキストフィールドを空欄にする</h2>
      <form onSubmit={handleSubmit(handleOutput)} type="submit">
        <Controller
          name="title"
          control={control}
          rules={{ required: true }}
          render={({ field: { ref, onChange, value } }) => (
            <TextField
              inputRef={ref}
              label="Title"
              value={value}
              type="text"
              onChange={onChange}
            />
          )}
        />
        <Button variant="contained" color="primary" type="submit">
          Submit
        </Button>
      </form>
    </div>
  );
}

解説

react-hooks-formとMaterial UIを一緒に使用する場合、ControllerコンポーネントでMaterial UIのコンポーネント(今回は <TextField />)をラップして制御する必要があります。

ControllerコンポーネントにPropsにrender propを設定します。render propによりTextField コンポーネントがControllerコンポーネントに返されます。そして、render propのコールバック第1引数のfieldオブジェクトの中に、{ref,onChange,value}を渡します。

onChange:入力の値をライブラリに送信する関数
ref:フックフォームと入力を接続するために使用される
value:制御しているコンポーネント内の現在の値

handleOutput関数が呼び出されたら、reset()を実行するようにします。

recet():フォームの状態、フィールドの参照、サブスクリプションをすべてリセットします。オプションの引数があり、フォームの状態を部分的にリセットすることができます。

また、recet()を使用するときに、useForm()にdefalutValuesを設定する必要があります。

For controlled components you will need to pass defaultValues to useForm in order to reset the Controller components' value.

https://react-hook-form.com/api/usecontroller/controller

https://reactjs.org/docs/render-props.html

Discussion

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