선택 이벤트가 변경되면 CSS 애니메이션이 해당 효과를 트리거합니다.

Question

React 앱을 만들려고 하는데 이제 포켓몬이 포함된 선택 입력 상자가 생겼습니다. 선택 항목이 변경될 때마다(예: 포켓몬 변경) 포켓몬 스프라이트가 작은 흔들리는 애니메이션을 만들어야 합니다. 현재는 변경되는 스프라이트와 선택 값이 변경될 때 재생되는 오디오만 있습니다. 이 기능을 어떻게 구현할 수 있나요? 스타일을 변경하기 위해 의 onChange和styled-components을 사용해 보았으나 제대로 작동하지 않았습니다. 애니메이션은 페이지가 로드될 때만 실행됩니다. 현재 코드는 다음과 같습니다.

Select.ts：

으아아아

img.styled.ts:

으아아아

감사합니다!

1

0

0

P粉200138510

회신하다

모든 응답(1)

나는 대답할 것이다 닫다

P粉9905682832024-04-02 00:10:18 1층

이 컴포넌트에서 src 상태를 선언하는 대신 setSrc를 해당 컴포넌트에 prop으로 전달하여 상위 컴포넌트에 src 상태를 넣는 것이 도움이 될 것이라고 믿습니다. 따라서 이 구성 요소 onChange={() => setSrc(newVal)}에서 setSrc는 Select 구성 요소에 prop으로 전달됩니다.

또는 evt.target.value를 상태로 저장하고 onChange 이벤트에서 값을 업데이트하는 것이 좋습니다.

으아아아

그런 다음:

으아아아

좋다 +0

답글 추가 关闭回复

P粉200138510

회신하다

인기 주제

더>

• CakePHP 튜토리얼
• 라라벨 튜토리얼
• PHP 튜토리얼
• 자바 튜토리얼

인기 기사

• 영국 왕립 조폐국과 RNLI가 힘을 합쳐 인명 구조 200주년을 기념했습니다.
• Bitgert vs Neiro vs Floki Inu – 2024년에 더 나은 투자?
• 삼국지 전쟁 전략 모바일 게임 초보자를 위한 삼국지 전쟁 게임 플레이 방법과 팁은 무엇인가요?
• The Bard Wars에서 기술 트리를 밝히는 방법 The Bard Wars에서 기술 트리를 밝히는 방법
• 파일 및 프로그램을 새 컴퓨터로 전송하는 방법: 4가지 쉬운 옵션

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1404018
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4232955
• 
  JAVA 초보자용 비디오 튜토리얼

  2424423

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1404018
• 
  JAVA 초보자용 비디오 튜토리얼

  2424423
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  498672
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  214244
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  860888

• 
  [웹 프런트엔드] Node.js 빠른 시작

  4796
• 
  해외 웹 개발 풀스택 강좌 총집합

  3714
• 
  Go 언어 실습 GraphQL

  3194
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  566
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  16360

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [부트스트랩 템플릿] 유기농 과일 및 야채 공급업체 웹 템플릿 Bootstrap5
• [백엔드 템플릿] Bootstrap3 다기능 데이터 정보 배경 관리 반응형 웹 페이지 템플릿-Novus
• [부트스트랩 템플릿] 부동산 자원 서비스 플랫폼 웹 페이지 템플릿 Bootstrap5
• [부트스트랩 템플릿] 간단한 이력서 정보 웹 템플릿 Bootstrap4
• [부트스트랩 템플릿] 부트스트랩 반응형 와이드스크린 도서 교육 웹사이트 템플릿 - DREAMLIFE
• [백엔드 템플릿] MAC 스타일 반응 형 블루 엔터프라이즈 CMS 배경 관리 시스템 템플릿
• [백엔드 템플릿] 반응형 그라데이션 분위기 배경 관리 시스템 웹사이트 템플릿-usinessbox
• [부트스트랩 템플릿] 반응형 야채 및 과일 매장 웹사이트 템플릿-Organio

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

회사 소개 부인 성명 Sitemap

PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

Answer 1

이 컴포넌트에서 src 상태를 선언하는 대신 setSrc를 해당 컴포넌트에 prop으로 전달하여 상위 컴포넌트에 src 상태를 넣는 것이 도움이 될 것이라고 믿습니다. 따라서 이 구성 요소 onChange={() => setSrc(newVal)}에서 setSrc는 Select 구성 요소에 prop으로 전달됩니다.

또는 evt.target.value를 상태로 저장하고 onChange 이벤트에서 값을 업데이트하는 것이 좋습니다.

으아아아

그런 다음:

으아아아