質問編集履歴
1
コード整形
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
```TypeScript
|
|
9
9
|
import * as React from 'react';
|
|
10
10
|
import './style.css';
|
|
11
|
-
|
|
12
11
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
13
12
|
|
|
14
13
|
import Button from 'react-bootstrap/Button';
|
|
@@ -19,27 +18,16 @@
|
|
|
19
18
|
const [text, setText] = React.useState('abc');
|
|
20
19
|
|
|
21
20
|
const MyDialog = () => {
|
|
22
|
-
|
|
21
|
+
console.log('MyDialogが表示されました');
|
|
23
22
|
|
|
24
23
|
return (
|
|
25
|
-
<Modal
|
|
26
|
-
show={visible}
|
|
27
|
-
onHide={() => {
|
|
24
|
+
<Modal show={visible} onHide={() => { setVisible(false); }}>
|
|
28
|
-
setVisible(false);
|
|
29
|
-
}}
|
|
30
|
-
>
|
|
31
25
|
<Modal.Header closeButton>
|
|
32
26
|
<Modal.Title>タイトル</Modal.Title>
|
|
33
27
|
</Modal.Header>
|
|
34
28
|
|
|
35
29
|
<Modal.Body>
|
|
36
|
-
<input
|
|
37
|
-
type="text"
|
|
38
|
-
value={text}
|
|
39
|
-
onChange={(e) => {
|
|
40
|
-
setText(e.target.value);
|
|
30
|
+
<input type="text" value={text} onChange={(e) => { setText(e.target.value); }} />
|
|
41
|
-
}}
|
|
42
|
-
/>
|
|
43
31
|
</Modal.Body>
|
|
44
32
|
|
|
45
33
|
<Modal.Footer>
|
|
@@ -54,18 +42,12 @@
|
|
|
54
42
|
<div>
|
|
55
43
|
<MyDialog />
|
|
56
44
|
|
|
57
|
-
<Button
|
|
58
|
-
|
|
45
|
+
<Button variant="primary" onClick={() => { setVisible(true); }}>
|
|
59
|
-
onClick={() => {
|
|
60
|
-
setVisible(true);
|
|
61
|
-
}}
|
|
62
|
-
>
|
|
63
46
|
モーダルダイアログを表示する
|
|
64
47
|
</Button>
|
|
65
48
|
</div>
|
|
66
49
|
);
|
|
67
50
|
}
|
|
68
|
-
|
|
69
51
|
```
|
|
70
52
|
https://stackblitz.com/edit/react-ts-v6wluw?file=App.tsx
|
|
71
53
|
|