react-hook-formとreact-selectの組み合わせ #10
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
abeshi03
commented
May 14, 2022
| @@ -52,6 +52,7 @@ export async function updateUser(updateUserData: User): Promise<void> { | |||
| name: updateUserData.name, | |||
| email: updateUserData.email, | |||
| description: updateUserData.description, | |||
| role: updateUserData.role, | |||
There was a problem hiding this comment.
ユーザーの追加と編集にroleを追加しました。
roleはnomal_userとadminです
| const { register, handleSubmit, control, formState: { errors } } = useForm<UserInputValues>(); | ||
|
|
||
| /* --- セレクトフィールド --------------------------------------------------------------------------------------------- */ | ||
| const roleOptions: SelectField.Option<UserRole>[] = |
There was a problem hiding this comment.
こちらセレクトオプションです。
既存の型定義を使ってハードコーディングしないように意識したのですが、書き方は適切でしょうか？🙇♂️
| value | ||
| })); | ||
|
|
||
| const getSelectDefaultValue = (): SelectField.Option<UserRole> | null => { |
There was a problem hiding this comment.
こちらdefaultValueのgetterです。
適切でしょうか？
abeshi03
commented
May 14, 2022
| @@ -31,7 +38,31 @@ export const UserControlGroup: VFC<Props> = memo((props) => { | |||
|
|
|||
| const { existingUserInfo, submitFunction, submitButtonName } = props; | |||
|
|
|||
| const { register, handleSubmit, formState: { errors } } = useForm<UserInputValues>(); | |||
| const defaultValues = { | |||
There was a problem hiding this comment.
こちらreact-selectがdefault valueを直接だと取れないようなので、defaultValuesでまとめて定義し、useFormで設定いたしました。
こちら適切でしょうか？🙇♂️
| @@ -78,6 +106,24 @@ export const UserControlGroup: VFC<Props> = memo((props) => { | |||
| })} | |||
| /> | |||
| { errors.description && userDescriptionErrorMessage(errors.description) } | |||
|
|
|||
| <Controller | |||
There was a problem hiding this comment.
こちらreact-selectとreact-hook-formのくみ合わせに関して適切でしょうか？
https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5?file=/src/index.js
https://react-hook-form.com/jp/api/#Controller
この辺参考にしました！
There was a problem hiding this comment.
はい、Controllerを利用して適切に記述できているかと思います。
|
ありがとうございます！ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
お世話になっております。
今回はreact-hook-formとreact-selectを組み合わせてみました。
お忙しいところ恐縮ですが、お手隙の際にレビューお願いいたします🙇♂️