2025/02/27
【Next.js】親コンポーネントのrefを子コンポーネントで使いたい
親コンポーネントで定義したrefを子コンポーネントで使用するにはforwardRefを使います。
page.tsx
"use client";
import { Button } from '@mantine/core';
import InputArea from './components/InputArea';
import { useRef } from 'react';
export default function Home() {
const inputRef = useRef<HTMLInputElement>(null);
return (
<div>
<InputArea ref={inputRef} defaultValue='テキスト' />
<Button onClick={() => alert(inputRef.current?.value)}>値を取得</Button>
</div>
)
}InputArea.tsx
import { forwardRef } from "react"
import { TextInput } from '@mantine/core';
interface Props {
defaultValue?: string
}
const InputArea = forwardRef<HTMLInputElement, Props>(function InputAreaBase(props, ref) {
return (
<div>
<TextInput ref={ref} defaultValue={props.defaultValue} />
</div>
)
});
export default InputArea;これで「値を取得」のボタンをクリックすると、
値が取得できています！