子コンポーネントの値を親コンポーネントが取得する方法は何ですか？

2年 ago
海斗, 葵
1 minute

Reactでは、親コンポーネントは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 = (event) => {
    const newValue = event.target.value;
    setValue(newValue);
    onValueChange(newValue);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

export default ChildComponent;

親コンポーネントでは、useStateフックを使って子コンポーネントの値を格納する状態変数childValueを作成します。

その後、子の値が変化したときに呼び出され、新しい値をchildValue変数に更新するコールバック関数handleChildValueChangeを定義します。

親コンポーネントで、useStateフックを使用して、値を入力フィールドに格納するための状態変数valueを作成します。

その後、handleChange関数を定義して、その関数は入力ボックスの値が変更された時に呼び出され、新しい値がvalue変数に更新される。

同時に、親コンポーネントから受け取ったonValueChangeコールバック関数を呼び出し、新しい値を親コンポーネントに渡す。

父コンポーネントでは、handleChildValueChange関数を子コンポーネントのonValueChangeプロパティに渡すことで、子コンポーネントの値を取得する機能が実現されました。

子コンポーネントの入力フィールドの値が変更された際に、親コンポーネントは自動的に更新されて最新の値が表示されます。

bannerAds