[解決済み] React Hook : 子コンポーネントから親コンポーネントへのデータ送信

質問

子コンポーネントから親コンポーネントへデータを渡すための最も簡単な解決策を探しています。

Contextの使用、プロパティの通過、またはプロップの更新について聞いたことがありますが、どれが最良の解決策なのかわかりません。

私は、複数行を選択できるテーブルを持つ子コンポーネントを含むPageComponentで、管理インターフェイスを構築しています。子コンポーネントで選択した行数を親のPageComponentに送信したいのです。

というようなものです。

PageComponentです。

<div className="App">
  <EnhancedTable />         
  <h2>count 0</h2>
  (count should be updated from child)
</div>

子コンポーネント:

 const EnhancedTable = () => {
     const [count, setCount] = useState(0);
     return (
       <button onClick={() => setCount(count + 1)}>
          Click me {count}
       </button>
     )
  };

結構簡単なことだと思うので、そのためにreduxを使うのは嫌ですね。

どのように解決するのですか？

親コンポーネントでメソッドを作成し、子コンポーネントに渡して、子コンポーネントの状態が変化するたびにpropsから呼び出すことで、子コンポーネントに状態を保持させることができます。

    const EnhancedTable = ({ parentCallback }) => {
        const [count, setCount] = useState(0);
        
        return (
            <button onClick={() => {
                const newValue = count + 1;
                setCount(newValue);
                parentCallback(newValue);
            }}>
                 Click me {count}
            </button>
        )
    };

    class PageComponent extends React.Component { 
        callback = (count) => {
            // do something with value in parent component, like save to state
        }

        render() {
            return (
                <div className="App">
                    <EnhancedTable parentCallback={this.callback} />         
                    <h2>count 0</h2>
                    (count should be updated from child)
                </div>
            )
        }
    }