Reactで親要素が子要素の値を取得する方法について

概要

Propsを介して値を渡す

親描画コンポーネントで子コンポーネントに値をpropsとして渡すことができる。
これにより、親コンポーネントが子コンポーネントの値にアクセスできるようになる。

親コンポーネント

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
 
function ParentComponent() {
  const [childValue, setChildValue] = useState('');
 
  const handleChildValueChange = (value) => {
    setChildValue(value);
  };
 
  return (
    <div>
      <ChildComponent onValueChange={handleChildValueChange} />
      <p>子コンポーネントの値: {childValue}</p>
    </div>
  );
}
 
export default ParentComponent;
 

子コンポーネント

import React, { useState } from 'react';
 
function ChildComponent({ onValueChange }) {
  const [value, setValue] = useState('');
 
  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    onValueChange(newValue);
  };
 
  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}
 
export default ChildComponent;
 

上記のコードでは、onValueChangeプロップを使用して、子コンポーネントでの値の変更を親コンポーネントに通知している。

ReactのuseRefフックを使用する

useRefフックを使用して、親コンポーネントから子コンポーネントに参照を渡し、子コンポーネントの値にアクセスすることが出来る。
ただし、useRefを使う場合、通常は非制御コンポーネントを扱う必要がある。

親コンポーネント

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';
 
function ParentComponent() {
  const childValueRef = useRef();
 
  const handleChildValueChange = () => {
    console.log('子コンポーネントの値:', childValueRef.current.value);
  };
 
  return (
    <div>
      <ChildComponent childValueRef={childValueRef} onValueChange={handleChildValueChange} />
    </div>
  );
}
 
export default ParentComponent;
 

子コンポーネント

import React from 'react';
 
function ChildComponent({ childValueRef, onValueChange }) {
  const handleChange = (e) => {
    childValueRef.current.value = e.target.value;
    onValueChange();
  };
 
  return (
    <div>
      <input type="text" onChange={handleChange} />
    </div>
  );
}
 
export default ChildComponent;
 

上記の例では、useRefを使用してchildValueRefを親から子に渡し、子コンポーネントの値にアクセスしている。
この方法は通常、非制御コンポーネントを取り扱うときに役立つ。