[React]テキストフィールドの値の渡し方がわからない

Question

前提・実現したいこと

material-uiのFormDialogを使用しているのですが、子から親コンポーネントにテキストフィールドに入力した値を渡してStateで管理する方法がわかりません。
propsは親→子だと思うので、これではできないと思います。
わかる方がいましたらコメントお願いします。

該当のソースコード

//省略

export default function Sample() {
  const classes = useStyles();
  //省略
  return (
    <div className={classes.parent}>
      //省略
      <Grid container className={classes.root_} spacing={2}>
        <Grid item xs={12}>
          <Grid container justify="center" spacing={2}>
            <Grid key={0} item>
              <FormDialog /> //該当箇所
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
}

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        add new member
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">名前登録</DialogTitle>
        <DialogContent>
          <DialogContentText>
            名前を記入してください
          </DialogContentText>
          <TextField //対象箇所
            autoFocus
            margin="dense"
            id="name"
            label="Name"
            type="email"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            OK
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Answer 1

こんにちは

親コンポーネントのstateに保持されている値を、子コンポーネントで変えるには、親コンポーネント側で、その値を変えるハンドラを用意して、これを子コンポーネントに prop 経由で渡し、子コンポーネントでそのハンドラを使うというのがお決まりのやり方です。これは Hooks が導入されてからも変わりません。

ご質問の例だと、親コンポーネントSampleの状態として持つべき（ダイアログから入力される）名前の値と、それと変更するハンドラをuseStateで取得し、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。

具体的な修正案を、以下のcodesandboxに挙げました。

• 修正前： codesandbox - Q247134 before

　　

• 修正後： codesandbox - Q247134 after

上記の修正前のほうは、ご質問に挙げられているコードを転記したもので、これに適宜コードを追加して、修正後のコードを作りました。修正後では、親コンポーネントにCard を追加し、ここに子コンポーネントのダイアログから入力された名前を表示させるようにしました。

上記の修正案による、修正前と修正後の差分を以下に挙げておきます。

Sample (src/index.js)

--- before/src/index.js	2020-03-15 00:23:00.000000000 +0900
+++ after/src/index.js	2020-03-15 00:10:28.000000000 +0900
@@ -1,23 +1,43 @@
-import React from "react";
+import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import Grid from "@material-ui/core/Grid";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
 import { makeStyles } from "@material-ui/styles";
 import FormDialog from "./FormDialog";
 
 const useStyles = makeStyles({
   parent: {},
-  root_: {}
+  root_: {},
+  result: {
+    backgroundColor: "#eee",
+    marginBottom: 30
+  },
+  name: {
+    fontWeight: "bold",
+    color: "darkblue"
+  }
 });
 
 function Sample() {
   const classes = useStyles();
+  const [name, setName] = useState("");
+
   return (
     <div className={classes.parent}>
       <Grid container className={classes.root_} spacing={2}>
         <Grid item xs={12}>
+          <Card className={classes.result}>
+            <CardContent>
+              入力された名前：
+              <span className={classes.name}>{name}</span>
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid item xs={12}>
           <Grid container justify="center" spacing={2}>
             <Grid key={0} item>
-              <FormDialog />
+              <FormDialog defaultValue={name} onSubmit={setName} />
             </Grid>
           </Grid>
         </Grid>

FormDialog (src/FormDialog.jsx)

--- before/src/FormDialog.jsx	2020-03-15 00:23:00.000000000 +0900
+++ after/src/FormDialog.jsx	2020-03-15 00:10:28.000000000 +0900
@@ -7,14 +7,20 @@
 import TextField from "@material-ui/core/TextField";
 import DialogActions from "@material-ui/core/DialogActions";
 
-export default function FormDialog() {
+export default function FormDialog({ defaultValue, onSubmit }) {
   const [open, setOpen] = React.useState(false);
+  const inputRef = React.useRef(null);
 
   const handleClickOpen = () => {
     setOpen(true);
   };
 
-  const handleClose = () => {
+  const handleCancel = () => {
+    setOpen(false);
+  };
+
+  const handleSubmit = () => {
+    onSubmit(inputRef.current.value);
     setOpen(false);
   };
 
@@ -25,7 +31,7 @@
       </Button>
       <Dialog
         open={open}
-        onClose={handleClose}
+        onClose={handleCancel}
         aria-labelledby="form-dialog-title"
       >
         <DialogTitle id="form-dialog-title">名前登録</DialogTitle>
@@ -38,13 +44,15 @@
             label="Name"
             type="email"
             fullWidth
+            defaultValue={defaultValue}
+            inputRef={inputRef}
           />
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose} color="primary">
+          <Button onClick={handleCancel} color="primary">
             Cancel
           </Button>
-          <Button onClick={handleClose} color="primary">
+          <Button onClick={handleSubmit} color="primary">
             OK
           </Button>
         </DialogActions>

以上参考になれば幸いです。

Comments

[aiai8976]

ご丁寧な解説ありがとうございました。
非常によくわかりました。

[jun68ykt]

どういたしまして。
> 非常によくわかりました。
とのことで、よかったです ????

[aiai8976]

実はこれでStateは変更できたのですが、親の方で再描画が実施されなくて困っています。
対象のコンポーネントをいじると再描画してくれるのですが、OKボタンを押した時点で再描画をしたいと思っています。何が原因かわかりますか？

[jun68ykt]

なるほどですね。
そういうことでしたら、
> 親の方で再描画が実施されなくて困っています。
との問題の原因と解決を求める新たなご質問を投稿して、そこにryota8976さんのお手元のコードの現状のものをご記載頂ければと思います。
そちらの質問を私も見ますし、他の回答者様も見るので、解決が早いと思います。

Answer 2

子から親へのつう親から子へコールバック関数を渡して、それを呼んでもらうようにします。

export default function Sample() {
  const [value, setValue] = useState('');
  //省略
  return (
    // 略
              <FormDialog setValue={setValue} /> //該当箇所

export default function FormDialog({ setValue }) {
  const [open, setOpen] = React.useState(false);
  const [text, setText] = React.useState('');

  // 略

  const handleClose = (ok) => {
    if (ok) {
      setValue(text);
    }
    setOpen(false);
  };

  return (
    // 略
          <TextField //対象箇所
            // 略
            text={text}
            onChange={e => setText(e.target.value)}
          />
        // 略
          <Button onClick={e => handleClose(false)} color="primary">
            Cancel
          </Button>
          <Button onClick={e => handleClose(true)} color="primary">
            OK
          </Button>
        // 略