質問編集履歴

1

該当箇所のコードの掲示・GitHubの設定をPublicに変更しました

2022/09/24 05:31

投稿

yuki96
yuki96

score26

test CHANGED
File without changes
test CHANGED
@@ -19,6 +19,121 @@
19
19
 
20
20
  https://github.com/yuki96422/react-todo
21
21
 
22
+ AddTaskModal.jsx
23
+ ```ここに言語を入力
24
+ import { useState } from 'react';
25
+ import {
26
+ Modal,
27
+ ModalOverlay,
28
+ ModalContent,
29
+ ModalHeader,
30
+ ModalFooter,
31
+ ModalBody,
32
+ ModalCloseButton,
33
+ useDisclosure,
34
+ Button,
35
+ Input,
36
+ } from '@chakra-ui/react';
37
+ import { SmallAddIcon } from '@chakra-ui/icons';
38
+
39
+ const AddTaskModal = () => {
40
+ const { isOpen, onOpen, onClose } = useDisclosure();
41
+
42
+ const CircleButtonStyle = {
43
+ background: '#319795',
44
+ cursor: 'pointer',
45
+ color: 'white',
46
+ borderRadius: '50%',
47
+ width: '60px',
48
+ height: '60px',
49
+ position: 'fixed',
50
+ right: '60px',
51
+ bottom: '60px',
52
+ };
53
+
54
+ const [todo, setTodo] = useState('');
55
+ const [incompleteTodo, setIncompleteTodo] = useState([]);
56
+
57
+ const onChangeTodo = (e) => setTodo(e.target.value);
58
+ const onClickAdd = () => {
59
+ if (todo === '') return;
60
+ const newTodo = [...incompleteTodo, todo];
61
+ setIncompleteTodo(newTodo);
62
+ setTodo('');
63
+ console.log(incompleteTodo);
64
+ };
65
+
66
+ const onClickDelete = () => {
67
+ setTodo('');
68
+ };
69
+
70
+ return (
71
+ <>
72
+ <Button onClick={onOpen} style={CircleButtonStyle}>
73
+ <SmallAddIcon w={8} h={8} />
74
+ </Button>
75
+
76
+ <Modal isOpen={isOpen} onClose={onClose}>
77
+ <ModalOverlay />
78
+ <ModalContent>
79
+ <ModalHeader>新規タスクを作成</ModalHeader>
80
+ <ModalCloseButton />
81
+ <ModalBody>
82
+ <Input placeholder="+新しいタスクを入力" value={todo} onChange={onChangeTodo} />
83
+ </ModalBody>
84
+
85
+ <ModalFooter>
86
+ <Button
87
+ bgColor="teal.500"
88
+ color="white"
89
+ borderRadius={10}
90
+ mr={3}
91
+ _hover={{ bgColor: 'teal.300' }}
92
+ onClick={onClickAdd}
93
+ >
94
+ 追加
95
+ </Button>
96
+
97
+ <Button
98
+ bgColor="gray.400"
99
+ color="white"
100
+ borderRadius={10}
101
+ _hover={{ bgColor: 'gray.300' }}
102
+ onClick={onClickDelete}
103
+ >
104
+ キャンセル
105
+ </Button>
106
+ </ModalFooter>
107
+ </ModalContent>
108
+ </Modal>
109
+ </>
110
+ );
111
+ };
112
+
113
+ export default AddTaskModal;
114
+ ```
115
+
116
+ router.jsx
117
+ ```ここに言語を入力
118
+ import {Routes,Route} from "react-router-dom"
119
+ import TaskList from "../components/pages/TaskList"
120
+ import Home from "../components/pages/Home"
121
+ import Page404 from "../components/pages/Page404"
122
+
123
+ const Router = () => {
124
+ return(
125
+ <Routes>
126
+ <Route path="/" element={<Home />} />
127
+ <Route path="list" element={<TaskList />} />
128
+ <Route path="*" element={<Page404 />} />
129
+ </Routes>
130
+ )
131
+ }
132
+
133
+ export default Router;
134
+ ```
135
+
136
+
22
137
  ### 補足情報(FW/ツールのバージョンなど)
23
138
  バージョンは以下です
24
139
  OS:mac