👏

chakraUIのEditable + react hook form + 自作ボタンでeditableなフォームを作成

2023/07/11に公開

React Hook Form

概要

react hook formを使ったプロジェクトの中でchakraUIのEditableを使用した時の備忘録

やりたいこと

chakraUIのEditableをコンポーネント化して使い回したい
react hook formと共存させたい
ボタン周りは自作のものを使いたい

完成品

実装の方針

基本的にはchakraUI Editableを参考に実装
react hook formを子コンポーネントのフォームで実装するため, useFormContextを利用

詰まったポイント

保存時とinputからスコープを外した時(つまり, editableのvalueが変更された時)にpostなどの処理(dosomething())を行いたい...！

Editable propsを見てみるとonSubmitというpropsが存在するので, ここに渡してあげる

components/input.tsx

...
<Editable
  ...
  onSubmit={(value) => {
  setValue(name, value);
  dosomething();
  }}
>
...

Warning: Function components cannot be given refs. のwarningが出て, 保存ボタン, キャンセルボタンが機能しない

reactのコンポーネントでは基本的にはrefをpropsとして受け取ることができない
このため, {...getCancelButtonProps()}などで渡されているrefが受け取れず, 保存ボタン, キャンセルボタンが機能しない
refを受け取るためにはforwardRefという高階関数を利用する必要がある

components/button.tsx

...
export const PrimaryButton = forwardRef((props: ButtonProps, ref) => {
  return (
    <Button
      ...
      {...props}
      ref={ref}
    />
  );
});
PrimaryButton.displayName = "PrimaryButton";

参考リンク

Discussion