ReactJS: 마우스를 올리면 드롭다운 메뉴 아이콘이 동적으로 업데이트됩니다.

Question

먼저 저는 ReactJS를 연습하기 위해 "antd" React 프레임워크와 tailwindCSS를 사용했습니다. 음, 이 프레임워크를 사용한 것은 이번이 처음입니다. 그래서 먼저 마우스 오버 시 드롭다운 팝업을 사용해 보기로 결정했습니다.

사실 저는 어떻게 이 단계까지 왔는지 잘 모르겠어요. 물론 CSS를 사용하면 "hover:" 속성을 사용할 수 있다는 것을 알고 있지만 ReactJS에서 로직을 사용하는 방법에 대한 아이디어가 있습니까? 또한 "드롭다운 메뉴에 대한 API 섹션" 소품을 읽으려고 시도했지만 성공하지 못했습니다. onMouseEnter() 作为 <Dropdown> 소품을 사용해봐도 여전히 안나오네요.

현재 상태를 보여드리기 위해 이 코드와 박스를 공유해두었습니다.

코드샌드박스 링크입니다

ReactJS의 "@antd/icons"에서 가져온 <UpOutlined /> 和 <DownOutlined />을 사용하여 마우스 오버 시 드롭다운 아이콘을 변경하고 싶고 tailwind CSS를 사용하고 있습니다.

역시 나는 이것을 원한다: 더미 웹사이트를 위한 호버 메뉴 데모

어떤 도움이라도 대단히 감사하겠습니다. 저는 어제부터 이것을 달성하려고 노력해 왔습니다 :(

Answer 1

Dropdown 上的 onOpenChange 기능을 사용하여 공개 상태를 확인할 수 있습니다. Dropdown Props를 참조하세요. 이를 사용하여 자신의 상태를 설정할 수 있습니다. 마지막으로 이 상태를 사용하여 다양한 아이콘을 표시합니다.

으아아아