TaskAddInputコンポーネントの作成

s-yoshiii · Apr 30, 2022 · a351ca8 · a351ca8
1 parent f71f479
commit a351ca8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/components/task/TaskCardTitle.tsx b/src/components/task/TaskCardTitle.tsx
@@ -10,7 +10,6 @@ const TaskCardTitle: FC = () => {
     console.log(isClick);
   };
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    console.log(inputCardTitle);
     setInputCardTitle(e.target.value);
   };
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -21,7 +20,7 @@ const TaskCardTitle: FC = () => {
     setIsClick(false);
   };
   return (
-    <Box component="div" onClick={handleClick}>
+    <Box component="div" sx={{ mb: 4 }} onClick={handleClick}>
       {isClick ? (
         <FormControl
           fullWidth

diff --git a/src/components/task/input/TaskCardAddInput.tsx b/src/components/task/input/TaskCardAddInput.tsx
@@ -1,7 +1,21 @@
+import { FormControl, TextField } from "@mui/material";
 import React, { FC } from "react";
 
 const TaskCardAddInput: FC = () => {
-  return <div></div>;
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault;
+    console.log(e);
+  };
+  return (
+    <FormControl
+      fullWidth
+      component="form"
+      variant="standard"
+      onSubmit={handleSubmit}
+    >
+      <TextField label="Add a task" />
+    </FormControl>
+  );
 };
 
 export default TaskCardAddInput;