以下がミニマルな形です。
SimpleSelect.tsx
import { ComponentPropsWithoutRef, forwardRef } from "react"
type Ref = HTMLSelectElement
export type SelectProps = ComponentPropsWithoutRef<"select">
export const SimpleSelect = forwardRef<Ref, SelectProps>(
({ name, onChange, ...rest }, ref) => {
return (
<select name={name} ref={ref} onChange={onChange} {...rest}>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="47">沖縄</option>
</select>
)
}
)
SimpleSelect.displayName = "SimpleSelect"
とりあえず name ,ref , onChange があれば動作します。
また以下のように name ,ref , onChange, onBlur は明示的に記述せずに {...rest} に含めてしまうのもよくやる書き方です
(rest, ref) => {
return (
<select {...rest}>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="47">沖縄</option>
</select>
)
}
React Hook Form で 出てくる register関数 は以下のようなデータが返ってきます。
{ ...register("myName") }
↓
{
name: 'myName',
onChange: ƒ,
onBlur: ƒ,
ref: ƒ
}