質問編集履歴
1
該当箇所のコードの掲示・GitHubの設定をPublicに変更しました
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
|