トップ Material-UIに関する質問 Material-UIのTableの中にDialogを入れたときに、Dialogの中身を思った通りに表示できない

編集履歴

回答編集履歴

テキスト修正

2019/12/01 00:29

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -204,11 +204,11 @@
 ```
-上記の `PersonRow` を使うと、 `ListApp` は以下のようになります。
+上記の `PersonRow` を使い、また 配列`people` はpropsから受け取るようにして、`ListApp` は以下のようになりました。
 ```jsx
-export default function ListApp(props) {
+export default function ListApp({ people }) {
   const [openId, setOpenId] = React.useState(null);

テキスト修正

2019/12/01 00:29

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -28,7 +28,7 @@
-- 変数名を `open` ではなく `openId` とし、値としては、boolean ではなく、ダイアログを開く対象となるpeople要素のidである文字列を入れる。
+- 変数名を `open` ではなく `openId` とし、その値として boolean ではなく、ダイアログを開く対象となるpeople要素の`id` を入れる。
 - すなわち `openId`が`"1"` のときは `"taro"` の `item` リストをダイアログで表示する。
@@ -44,7 +44,7 @@
 `export default function List(props)`
-のコードを元に、上記の方針による修正を行ったものが、以下です。（__注：名前を__ `List`__から__ `ListApp` __に変えています。これは__`@material-ui/icons/List` __からimport された__`List`__と、名前が重複するのを避けるためです。__）
+のコードを元に、上記の設計による修正を行ったものが、以下です。（__注：名前を__ `List`__から__ `ListApp` __に変えています。これは__`@material-ui/icons/List` __からimport された__`List`__と、名前が重複するのを避けるためです。__）

テキスト修正

2019/11/30 23:34

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -12,7 +12,7 @@
 ```
-で取得される `open` はbooleanであり、これを、peopleの要素数分作られる `<SimpleDialog>` のどれに対しても prop `open`として渡していますが、これだと、`setOpen(true)` によって`open` が trueになったときに、3つの`<SimpleDialog>` のprop `open` はどれも true が渡されて、3つのダイアログともに開いた状態になってしまいます。そのために結果として
+で取得される `open` を、peopleの要素数分作られる `<SimpleDialog>` のどれに対しても prop `open`として渡していますが、これだと、`setOpen(true)` によって`open` が trueになったときに、どの`<SimpleDialog>` についても prop `open` には true が渡されます。従って、全てのダイアログが開いた状態になってしまいます。そのために結果として
@@ -24,7 +24,7 @@
-修正方法の一案として、下記のように state に入れておく値を設計しなおすことが考えられます。
+上記を避けるための修正の一案としては、下記のように state に入れておく値を設計しなおすことが考えられます。

テキスト修正

2019/11/30 23:31

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -164,7 +164,7 @@
-上記の回答に挙げた`ListApp` のコードは、ご質問に挙げられている `List` のコードに対して最小限の修正をしたものですが、さらにリファクタして、以下のようになりました。
+上記の回答に挙げた`ListApp` のコードは、ご質問に挙げられている `List` のコードに対して最小限の修正をしたものですが、さらにリファクタしたものを下記に挙げます。

テキスト修正

2019/11/30 14:11

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -172,7 +172,7 @@
-（__注： 以下のコード、何故か、シンタクスハイライトが効きません。その点、多少見にくいですがご了承ください。__）
+元のコードでは、`makeTable`という関数が`ListApp`の中にあり、これがテーブル行の配列を返していましたが、このような関数を作るのならば、いっそのこと関数コンポーネントとして切り出そうという趣旨で、切り出す単位を一行分として、`PersonRow` というコンポーネントにしました。
@@ -202,7 +202,11 @@
 );
+```
+上記の `PersonRow` を使うと、 `ListApp` は以下のようになります。
+```jsx
 export default function ListApp(props) {
@@ -256,7 +260,7 @@
-元のコードでは、`makeTable`という関数が`ListApp`の中にあり、これがテーブル行の配列を返していましたが、このような関数を作るのならば、いっそのこと関数コンポーネントとして切り出そうという趣旨で、切り出す単位を一行分として、`PersonRow` というコンポーネントにしました。

テキスト修正

2019/11/30 14:10

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -32,7 +32,7 @@
 - すなわち `openId`が`"1"` のときは `"taro"` の `item` リストをダイアログで表示する。
-- `openId`が `null` のとき、どの要素に対するダイアログも閉じている。これを初期値とする。
+- `openId`が `null` のとき、ダイアログは全て閉じている。これを初期値とする。

テキスト修正

2019/11/30 13:43

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -24,7 +24,7 @@
-修正方法の一案として、下記のように state に入れておく値を設計することが考えられます。
+修正方法の一案として、下記のように state に入れておく値を設計しなおすことが考えられます。

テキスト追加

2019/11/30 13:35

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -28,9 +28,9 @@
-- `open` ではなく `openId` として、値としては、boolean ではなく、ダイアログを開く対象となるpeople要素のidプロパティの文字列を入れることにする。
+- 変数名を `open` ではなく `openId` とし、値としては、boolean ではなく、ダイアログを開く対象となるpeople要素のidである文字列を入れる。
-- すなわち `openId`が`"1"` のときは `"taro"` の持ち物をダイアログで表示する。
+- すなわち `openId`が`"1"` のときは `"taro"` の `item` リストをダイアログで表示する。
 - `openId`が `null` のとき、どの要素に対するダイアログも閉じている。これを初期値とする。

テキスト修正

2019/11/30 13:16

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -180,7 +180,7 @@
 const PersonRow = ({ person, open, onOpen, onClose }) => (
-  <TableRow hover key={person.id} tabIndex={-1}>
+  <TableRow hover tabIndex={-1}>
     <TableCell align="center">{person.id}</TableCell>
@@ -220,6 +220,8 @@
             <PersonRow
+              key={person.id}
               person={person}
               open={openId === person.id}
@@ -248,11 +250,13 @@
 }
 ```
-元のコードでは、`makeTable`という関数を `ListApp`の中に作って、これによって、テーブル行の配列を返させていましたが、関数を作るのならば、関数コンポーネントとして切り出そうという趣旨で、一行分を `PersonRow` というコンポーネントにしました。
+元のコードでは、`makeTable`という関数が`ListApp`の中にあり、これがテーブル行の配列を返していましたが、このような関数を作るのならば、いっそのこと関数コンポーネントとして切り出そうという趣旨で、切り出す単位を一行分として、`PersonRow` というコンポーネントにしました。

テキスト修正

2019/11/30 13:12

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -172,6 +172,8 @@
+（__注： 以下のコード、何故か、シンタクスハイライトが効きません。その点、多少見にくいですがご了承ください。__）
 ```jsx

テキスト修正

2019/11/30 13:06

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -50,7 +50,7 @@
-## ListApp
+### ListApp
 ```jsx
@@ -155,3 +155,107 @@
 以上、参考になれば幸いです。
+## 追記
+上記の回答に挙げた`ListApp` のコードは、ご質問に挙げられている `List` のコードに対して最小限の修正をしたものですが、さらにリファクタして、以下のようになりました。
+### ListApp (修正版）
+```jsx
+const PersonRow = ({ person, open, onOpen, onClose }) => (
+  <TableRow hover key={person.id} tabIndex={-1}>
+    <TableCell align="center">{person.id}</TableCell>
+    <TableCell align="center">{person.name}</TableCell>
+    <TableCell>
+      <IconButton onClick={onOpen}>
+        <ListIcon />
+      </IconButton>
+      <SimpleDialog open={open} onClose={onClose} itemList={person.item} />
+    </TableCell>
+  </TableRow>
+);
+export default function ListApp(props) {
+  const [openId, setOpenId] = React.useState(null);
+  return (
+    <Table>
+      <TableBody>
+        {people &&
+          people.map(person => (
+            <PersonRow
+              person={person}
+              open={openId === person.id}
+              onOpen={() => {
+                setOpenId(person.id);
+              }}
+              onClose={() => {
+                setOpenId(null);
+              }}
+            />
+          ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+元のコードでは、`makeTable`という関数を `ListApp`の中に作って、これによって、テーブル行の配列を返させていましたが、関数を作るのならば、関数コンポーネントとして切り出そうという趣旨で、一行分を `PersonRow` というコンポーネントにしました。
+- **動作確認用codesandbox：** [https://codesandbox.io/s/q225208-nlscn](https://codesandbox.io/s/q225208-nlscn)
+あくまでリファクタの一例として参考にして頂ければと思います。

テキスト修正

2019/11/30 13:02

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -32,7 +32,7 @@
 - すなわち `openId`が`"1"` のときは `"taro"` の持ち物をダイアログで表示する。
-- `openId`の初期値は `null` とし、どの要素に対するダイアログも閉じている。
+- `openId`が `null` のとき、どの要素に対するダイアログも閉じている。これを初期値とする。
@@ -44,7 +44,7 @@
 `export default function List(props)`
-のコードを元に、上記の修正を行ったものが、以下です。（注：名前を `List`から `ListApp` に変えています。これは`@material-ui/icons/List` からimport された`List`と、名前が重複するのを避けるためです。）
+のコードを元に、上記の方針による修正を行ったものが、以下です。（__注：名前を__ `List`__から__ `ListApp` __に変えています。これは__`@material-ui/icons/List` __からimport された__`List`__と、名前が重複するのを避けるためです。__）

テキスト修正

2019/11/30 12:30

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -12,7 +12,7 @@
 ```
-で取得される `open` はbooleanであり、これを、peopleの要素数分作られる `<SimpleDialog>` のどれに対しても渡していますが、これだと、`open` が trueになったときに、3つの`<SimpleDialog>` のprop `open` すべてに true が渡って、3つとも開いた状態になってしまいます。そのために結果として
+で取得される `open` はbooleanであり、これを、peopleの要素数分作られる `<SimpleDialog>` のどれに対しても prop `open`として渡していますが、これだと、`setOpen(true)` によって`open` が trueになったときに、3つの`<SimpleDialog>` のprop `open` はどれも true が渡されて、3つのダイアログともに開いた状態になってしまいます。そのために結果として
@@ -20,7 +20,7 @@
-ということになるものと思われます。
+という(ように見えてしまう)ことになるものと思われます。
@@ -40,7 +40,113 @@
+ご質問のコードにある
+`export default function List(props)`
+のコードを元に、上記の修正を行ったものが、以下です。（注：名前を `List`から `ListApp` に変えています。これは`@material-ui/icons/List` からimport された`List`と、名前が重複するのを避けるためです。）
+## ListApp
+```jsx
+export default function ListApp(props) {
+  const [openId, setOpenId] = React.useState(null);
+  const handleClickOpen = id => {
+    setOpenId(id);
+  };
+  const handleClose = () => {
+    setOpenId(null);
+  };
+  const makeTable = people => {
+    if (people) {
+      return people.map(person => {
+        return (
+          <TableRow hover key={person.id} tabIndex={-1}>
+            <TableCell align="center">{person.id}</TableCell>
+            <TableCell align="center">{person.name}</TableCell>
+            <TableCell>
+              <IconButton
+                onClick={() => {
+                  handleClickOpen(person.id);
+                }}
+              >
+                <ListIcon />
+              </IconButton>
+              <SimpleDialog
+                open={openId === person.id}
+                onClose={handleClose}
+                itemList={person.item}
+              />
+            </TableCell>
+          </TableRow>
+        );
+      });
+    }
+  };
+  return (
+    <Table>
+      <TableBody>{makeTable(people)}</TableBody>
+    </Table>
+  );
+}
+```
-以下は、ご質問のコードをcodesandboxに転記して、上記の修正を行ったものです。
+上記の `<ListApp />` を、下記のcodesandboxにて動作確認できます。
@@ -48,8 +154,4 @@
-なお、ご質問にある `List` コンポーネントは、 `@material-ui/icons/List` からimport された`List`と名前が重複するので、上記のcodesandboxに作成したサンプルでは `ListApp` という名前にしています。
 以上、参考になれば幸いです。