TIL DAY.37 [React] 버튼 중복 클릭 기능

Dan·2020년 10월 31일
1

리액트

목록 보기
14/17

오늘은 브랜디 admin 홈페이지에 존재하는 버튼 중복 선택 기능 코드에 대해서 알아보도록 하겠다.

const [isProperty, setIsProperty] = useState(["전체"]);

 const handlePropertyBtn = (e) => {
    const { value } = e.target;

    if (value === "전체") {
      setIsProperty(["전체"]);
    } else if (isProperty.length === 6) {
      setIsProperty(["전체"]);
    } else if (isProperty.find((e) => e === value)) {
      setIsProperty(isProperty.filter((e) => e !== value));
    } else if (isProperty.length > 0) {
      setIsProperty([...isProperty.filter((e) => e !== "전체"), value]);
    } else {
      setIsProperty(["전체"]);
    }
  };
  
  <PropertyBtns
              type="button"
              value="전체"
              onClick={handlePropertyBtn}
              Clicked={isProperty.find((e) => e === "전체")}
            />
            <PropertyBtns
              type="button"
              value="쇼핑몰"
              onClick={handlePropertyBtn}
              Clicked={isProperty.find((e) => e === "쇼핑몰")}
            />
            <PropertyBtns
              type="button"
              value="마켓"
              onClick={handlePropertyBtn}
              Clicked={isProperty.find((e) => e === "마켓")}
            />
            <PropertyBtns
              type="button"
              value="로드샵"
              onClick={handlePropertyBtn}
              Clicked={isProperty.find((e) => e === "로드샵")}
            />
            <PropertyBtns
              type="button"
              value="디자이너브랜드"
              onClick={handlePropertyBtn}
              Clicked={isProperty.find((e) => e === "디자이너브랜드")}
            />
            <PropertyBtns
              type="button"
              value="제너럴브랜드"
              onClick={handlePropertyBtn}
              Clicked={isProperty.find((e) => e === "제너럴브랜드")}
            />
            <PropertyBtns
              type="button"
              value="내셔널브랜드"
              onClick={handlePropertyBtn}
              Clicked={isProperty.find((e) => e === "내셔널브랜드")}
            />
            <PropertyBtns
              type="button"
              value="뷰티"
              onClick={handlePropertyBtn}
              Clicked={isProperty.find((e) => e === "뷰티")}
            />

위와 같은 코드를 작성 시 아래와 같은 결과물이 나온다.

profile
만들고 싶은게 많은 개발자

0개의 댓글