React 他関数コンポーネントのstateを変更したい。

Question

React初心者です。
基本的なことを質問してしまうかもしれませんがすみませんm(_ _)m

やりたいこと

ボタンコンポーネントのクリック時にダイアログコンポーネントのプロパティ openフラグを更新したい。

質問内容

ボタンを押した時に、他コンポーネントで定義した ステートフックのset関数をボタン押下時に呼び出したいです。
実装イメージは下記です。

function Button() {
  return (
    <button type="button" onClick={　TestDialogのsetOpen()を呼び出したい　}>ボタン</button>
  )
}

function TestDialog() {
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => { setOpen(true);  };
  const handleClose = ()     => { setOpen(false); };

  return (
    <Dialog>...</DiaLog>
  )
}

このような場合、Reactではどのように実装するのが望ましいですか？
関数コンポーネントではなく、クラスコンポーネントを使うことがよいのでしょうか？
何かアドバイスいただければ嬉しいです。

参考にしたページ

https://ja.reactjs.org/docs/hooks-state.html
https://material-ui.com/components/buttons/
https://material-ui.com/components/dialogs/#full-screen-dialogs

Answer 1

シンプルな実装であればpropsだけで可能です。

まずはコンポーネントとして以下の3つを作成する前提で書いていきます。

1. Buttonコンポーネント：ボタンを描画
2. TestDialogコンポーネント：ダイアログを描画
3. Appコンポーネント：ダイアログを表示する親コンポーネント（仮）

上記のような構成にした場合、ダイアログの開閉（提示いただいたソースで言うところのhandleClickOpen、handleClose）を行うのは、ダイアログを表示する側の親コンポーネントにすると分かりやすいです（TestDialogコンポーネント自体がダイアログの表示/非表示を切り替える訳ではないので）。

上記を踏まえると、以下のようになります。

function App() {
  const [open, setOpen] = React.useState(false);
  // handleClickOpenとhandleCloseを纏めて以下で書き直してます。
  const handleDialogOpen = () => {setOpen(!open)};
  
  return (
    <div>
      <Button onClick={handleDialogOpen} />
      <TestDialog open={open} />
    </div>
  );
}

export function TestDialog(props) {
    // ダイアログを表示する代わりに文字列表示するだけにしてます。
    // material-uiのダイアログ使う場合は、<Dialog open={props.open} />みたいに代えてみてください。
    return props.open ? <h2>TestDialog</h2> : null
}

export function Button(props) {
    return <button type="button" onClick={props.onClick}>ボタン</button>
}

Comments

[Buzzword111]

回答ありがとうございます。

なるほどですね。
回答を受けて今作成しているWEBアプリで、ダイアログを表示する画面のJSにダイアログのopen, closeの処理を移しました。
その上で表示／非表示のstateを子コンポーネントに propsとして渡すように修正したらわかりやすく実装できました。

感謝です!!!