トップ Material-UIに関する質問 [React]テキストフィールドの値の渡し方がわからない

編集履歴

回答編集履歴

テキスト追加

2020/03/15 00:51

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -26,13 +26,13 @@
-下記に、上記の修正案による、修正前と修正後の差分を挙げておきます。
+上記の修正案による、修正前と修正後の差分を以下に挙げておきます。
-### src/index.js (Sample)
+### Sample (src/index.js)
 ```diff
@@ -138,7 +138,7 @@
-### src/FormDialog.jsx
+### FormDialog (src/FormDialog.jsx)
 ```diff

テキスト追加

2020/03/15 00:51

投稿

jun68ykt

スコア9058

test CHANGED Viewed

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

テキスト追加

2020/03/15 00:34

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -22,7 +22,7 @@
-上記の**修正前**のほうは、ご質問に挙げられているコードを転記したもので、これに適宜コードを追加して、**修正後**のコードを作りました。**修正後**では、親コンポーネントの「入力された名前：」の部分に、ダイアログから入力された値が表示されるようにしています。
+上記の**修正前**のほうは、ご質問に挙げられているコードを転記したもので、これに適宜コードを追加して、**修正後**のコードを作りました。**修正後**では、親コンポーネントに[Card](https://material-ui.com/components/cards/) を追加し、ここに子コンポーネントのダイアログから入力された名前を表示させるようにしました。

テキスト追加

2020/03/15 00:33

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -26,249 +26,225 @@
-下記に修正後のコードを挙げておきます。
-### index.js
-```jsx
-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_: {},
-  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 defaultValue={name} onSubmit={setName} />
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
-    </div>
-  );
-}
-ReactDOM.render(<Sample />, document.getElementById("root"));
+下記に、上記の修正案による、修正前と修正後の差分を挙げておきます。
+### src/index.js (Sample)
+```diff
+--- 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.jsx
-```jsx
-import React from "react";
-import Button from "@material-ui/core/Button";
-import Dialog from "@material-ui/core/Dialog";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import TextField from "@material-ui/core/TextField";
-import DialogActions from "@material-ui/core/DialogActions";
-export default function FormDialog({ defaultValue, onSubmit }) {
-  const [open, setOpen] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-  const handleCancel = () => {
-    setOpen(false);
-  };
-  const handleSubmit = () => {
-    onSubmit(inputRef.current.value);
-    setOpen(false);
-  };
-  return (
-    <div>
-      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
-        add new member
-      </Button>
-      <Dialog
-        open={open}
-        onClose={handleCancel}
-        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
-            defaultValue={defaultValue}
-            inputRef={inputRef}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleCancel} color="primary">
-            Cancel
-          </Button>
-          <Button onClick={handleSubmit} color="primary">
-            OK
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
-  );
-}
+### src/FormDialog.jsx
+```diff
+--- 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>
 ```

テキスト追加

2020/03/15 00:28

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,11 +2,15 @@
+親コンポーネントのstateに保持されている値を、子コンポーネントで変えるには、親コンポーネント側で、その値を変えるハンドラを用意して、これを子コンポーネントに prop 経由で渡し、子コンポーネントでそのハンドラを使うというのがお決まりのやり方です。
-ご質問の例だと、親コンポーネントの状態として持つべき、（ダイアログから入力される）名前の値と、それと変更するハンドラを`useState`で取得し、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。（つまり、material-uiのコンポーネントだからといって、特別な何かをする必要はないです。）
+ご質問の例だと、親コンポーネント`Sample`の状態として持つべき（ダイアログから入力される）名前の値と、それと変更するハンドラを`useState`で取得し、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。
-具体的な修正方法を示すものとして、codesandboxに、ダイアログからの入力値を親コンポーネントに反映させる例を挙げました。
+具体的な修正案を、以下のcodesandboxに挙げました。
@@ -18,7 +22,7 @@
-上記の**修正前**のほうは、ご質問に挙げられているコードを転記したもので、これに適宜コードを追加して、親コンポーネントのほうの「入力された名前：」の部分に、ダイアログから入力された値が反映されるようにしたものが、**修正後**のものになります。
+上記の**修正前**のほうは、ご質問に挙げられているコードを転記したもので、これに適宜コードを追加して、**修正後**のコードを作りました。**修正後**では、親コンポーネントの「入力された名前：」の部分に、ダイアログから入力された値が表示されるようにしています。

テキスト追加

2020/03/14 20:04

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-ご質問の例だと、親コンポーネントの状態として持つべき名前の値とそれと変更するハンドラをuseStateで取得し、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。（つまり、material-uiのコンポーネントだからといって、特別な何かをする必要はないです。）
+ご質問の例だと、親コンポーネントの状態として持つべき、（ダイアログから入力される）名前の値と、それと変更するハンドラを`useState`で取得し、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。（つまり、material-uiのコンポーネントだからといって、特別な何かをする必要はないです。）

テキスト追加

2020/03/14 19:21

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -50,20 +50,24 @@
 const useStyles = makeStyles({
+  parent: {},
+  root_: {},
+  result: {
+    backgroundColor: "#eee",
+    marginBottom: 30
+  },
   name: {
     fontWeight: "bold",
     color: "darkblue"
-  },
-  result: {
-    backgroundColor: "#eee",
-    marginBottom: 30
   }
 });

テキスト追加

2020/03/14 19:20

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,11 +2,11 @@
-material-uiのコンポーネントだからといって、特別な何かをする必要はなく、ご質問の例だと、親コンポーネントの状態として持つべき名前の値とそれと変更するハンドラをuseStateで取得し、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。
+ご質問の例だと、親コンポーネントの状態として持つべき名前の値とそれと変更するハンドラをuseStateで取得し、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。（つまり、material-uiのコンポーネントだからといって、特別な何かをする必要はないです。）
-以下、codesandboxに、ダイアログからの入力値を親コンポーネントに反映させる作例を挙げました。
+具体的な修正方法を示すものとして、codesandboxに、ダイアログからの入力値を親コンポーネントに反映させる例を挙げました。

テキスト追加

2020/03/14 19:06

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-material-uiのコンポーネントだからといって、特別何か普通と違うことをする必要はなく、ご質問の例だと、親コンポーネントで useState して、状態として持つべき名前の値とそれと変更するハンドラを作り、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。
+material-uiのコンポーネントだからといって、特別な何かをする必要はなく、ご質問の例だと、親コンポーネントの状態として持つべき名前の値とそれと変更するハンドラをuseStateで取得し、それらを子コンポーネントに渡して、子ではそれらを適切に使えばよいです。

テキスト追加

2020/03/14 18:52

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -14,7 +14,7 @@
-- **修正後：** codesandbox- [Q247134 after](https://codesandbox.io/s/q247134-after-vi0pi)
+- **修正後：** codesandbox - [Q247134 after](https://codesandbox.io/s/q247134-after-vi0pi)

テキスト追加

2020/03/14 18:27

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -10,11 +10,11 @@
-- **修正前：** codesandbox/[q247134-before](https://codesandbox.io/s/q247134-before-uqnuw)
+- **修正前：** codesandbox - [Q247134 before](https://codesandbox.io/s/q247134-before-uqnuw)
-- **修正後：** codesandbox/[q247134-after](https://codesandbox.io/s/q247134-after-vi0pi)
+- **修正後：** codesandbox- [Q247134 after](https://codesandbox.io/s/q247134-after-vi0pi)

テキスト追加

2020/03/14 18:27

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -10,11 +10,11 @@
-- **修正前：** [https://codesandbox.io/s/q247134-before-uqnuw](https://codesandbox.io/s/q247134-before-uqnuw)
+- **修正前：** codesandbox/[q247134-before](https://codesandbox.io/s/q247134-before-uqnuw)
-- **修正後：** [https://codesandbox.io/s/q247134-after-vi0pi](https://codesandbox.io/s/q247134-after-vi0pi)
+- **修正後：** codesandbox/[q247134-after](https://codesandbox.io/s/q247134-after-vi0pi)

テキスト追加

2020/03/14 18:25

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -6,7 +6,7 @@
-以下に、ダイアログからの入力値を親コンポーネントに反映させる作例を挙げました。
+以下、codesandboxに、ダイアログからの入力値を親コンポーネントに反映させる作例を挙げました。
@@ -22,4 +22,248 @@
+下記に修正後のコードを挙げておきます。
+### index.js
+```jsx
+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({
+  name: {
+    fontWeight: "bold",
+    color: "darkblue"
+  },
+  result: {
+    backgroundColor: "#eee",
+    marginBottom: 30
+  }
+});
+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 defaultValue={name} onSubmit={setName} />
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+ReactDOM.render(<Sample />, document.getElementById("root"));
+```
+### FormDialog.jsx
+```jsx
+import React from "react";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import TextField from "@material-ui/core/TextField";
+import DialogActions from "@material-ui/core/DialogActions";
+export default function FormDialog({ defaultValue, onSubmit }) {
+  const [open, setOpen] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleCancel = () => {
+    setOpen(false);
+  };
+  const handleSubmit = () => {
+    onSubmit(inputRef.current.value);
+    setOpen(false);
+  };
+  return (
+    <div>
+      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+        add new member
+      </Button>
+      <Dialog
+        open={open}
+        onClose={handleCancel}
+        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
+            defaultValue={defaultValue}
+            inputRef={inputRef}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCancel} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} color="primary">
+            OK
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}
+```
 以上参考になれば幸いです。

テキスト追加

2020/03/14 18:13

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -6,7 +6,7 @@
-以下に作例を挙げました。
+以下に、ダイアログからの入力値を親コンポーネントに反映させる作例を挙げました。

テキスト追加

2020/03/14 17:20

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -14,7 +14,7 @@
-- **修正後：** [https://codesandbox.io/s/q247134-after-7wq55](https://codesandbox.io/s/q247134-after-7wq55)
+- **修正後：** [https://codesandbox.io/s/q247134-after-vi0pi](https://codesandbox.io/s/q247134-after-vi0pi)

テキスト追加

2020/03/14 17:17

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -18,7 +18,7 @@
-上記の修正前のほうは、ご質問に挙げられているコードを転記したもので、これに適宜コードを追加して、親コンポーネントのほうの「入力された名前：」の部分に、ダイアログから入力された値が反映されるようにしたものです。
+上記の**修正前**のほうは、ご質問に挙げられているコードを転記したもので、これに適宜コードを追加して、親コンポーネントのほうの「入力された名前：」の部分に、ダイアログから入力された値が反映されるようにしたものが、**修正後**のものになります。