State Management 5.13_Categories
7786 단어 master-classreact.jsmaster-class
Categories
사용자들이 버튼을 이용하여 toDo의 카테고리를 바꿀 수 있게 하는 기능을 추가해보자
onClick을 주자
ToDo.tsx
import React from "react";
import { useSetRecoilState } from "recoil";
import { IToDo, toDoState } from "../../../atoms";
export default function ToDo({ text, category, id }: IToDo) {
const setToDos = useSetRecoilState(toDoState);
const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
const {
currentTarget: { name },
} = event;
};
return (
<li>
<span> {text}</span>
{category !== "DOING" && (
<button name="DOING" onClick={onClick}>
Doing
</button>
)}
{category !== "TO_DO" && (
<button name="TO_DO" onClick={onClick}>
To Do
</button>
)}
{category !== "DONE" && (
<button name="DONE" onClick={onClick}>
Done
</button>
)}
{/* {category !== "DOING" && <button onClick={() => onClick("DOING")}>Doing</button>}
{category !== "TO_DO" && <button onClick={() => onClick("TO_DO")}>To Do</button>}
{category !== "DONE" && <button onClick={() => onClick("DONE")}>Done</button>} */}
</li>
);
}
Author And Source
이 문제에 관하여(State Management 5.13_Categories), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@angel_eugnen/State-Management-5.13Categories
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React from "react";
import { useSetRecoilState } from "recoil";
import { IToDo, toDoState } from "../../../atoms";
export default function ToDo({ text, category, id }: IToDo) {
const setToDos = useSetRecoilState(toDoState);
const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
const {
currentTarget: { name },
} = event;
};
return (
<li>
<span> {text}</span>
{category !== "DOING" && (
<button name="DOING" onClick={onClick}>
Doing
</button>
)}
{category !== "TO_DO" && (
<button name="TO_DO" onClick={onClick}>
To Do
</button>
)}
{category !== "DONE" && (
<button name="DONE" onClick={onClick}>
Done
</button>
)}
{/* {category !== "DOING" && <button onClick={() => onClick("DOING")}>Doing</button>}
{category !== "TO_DO" && <button onClick={() => onClick("TO_DO")}>To Do</button>}
{category !== "DONE" && <button onClick={() => onClick("DONE")}>Done</button>} */}
</li>
);
}
Author And Source
이 문제에 관하여(State Management 5.13_Categories), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@angel_eugnen/State-Management-5.13Categories저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)