🙄

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

2022/10/18に公開

React

JavaScript

tech

これは何か？

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.

GitHubで編集を提案

これは何か？

実装

解説

Discussion