Wenn sich das Auswahlereignis ändert, löst die CSS-Animation den entsprechenden Effekt aus.

Question

Ich versuche, eine React-App zu erstellen. Jetzt habe ich ein Auswahleingabefeld mit einigen Pokémon. Was ich tun muss, ist, dass das Pokémon-Sprite jedes Mal, wenn sich die Auswahl ändert (d. h. das Pokémon), eine kleine Schüttelanimation erstellt. Derzeit habe ich nur ein Sprite, das sich ändert, und ein Audio, das abgespielt wird, wenn sich der Auswahlwert ändert. Wie kann ich diese Funktionalität implementieren? Ich habe versucht, den Stil mit s onChange和styled-components zu ändern, aber es funktioniert nicht. Die -Animation wird nur ausgelöst, wenn die Seite geladen wird. Das ist mein aktueller Code:

Select.ts:

import { closest } from "fastest-levenshtein";
import React, { useState } from "react";
import { cries, pokemons } from "../data";
import styled from "styled-components";
import { Img, ani } from "../styles";

function Select() {
  const [src, setSrc] = useState(require("../data/sprites/bulbasaur.png"));
  const opts: { label: string; value: string }[] = [];
  for (let i = 0; i < pokemons.length; i++) {
    opts.push({
      label: pokemons[i][0].toUpperCase() + pokemons[i].slice(1),
      value: pokemons[i],
    });
  }
  return (
    <div>
      <div>
        <select
          onChange={(evt) => {
            setSrc(require(`../data/sprites/${evt.target.value}.png`));
            const str = closest(evt.target.value, cries);
            const res = new Audio(require(`../data/cries/${str}`));
            res.volume = 0.2;
            res.play();
            styled(Img)`
              margin-left: 2.5em;
              animation: ${ani};
            `;
          }}
        >
          {opts.map(({ label, value }) => (
            <option key={value} label={label} value={value}></option>
          ))}
        </select>
      </div>
      <Img src={src} alt="" className="sprite" />
    </div>
  );
}

export default Select;

img.styled.ts:

import styled, { css } from "styled-components";
import { shake } from "./shake.stiled";

const ani = css(["", " 0.3s linear"] as any as TemplateStringsArray, shake);
const Img = styled.img`
  margin-left: 2.5em;
  animation: ${ani};
`;

export { Img, ani };

Danke!

1

0

0

P粉200138510

Antwort

Antworte allen(1)

Ich werde antworten Schließen

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

我相信，将src状态放在父组件中，通过将setSrc作为prop传递给该组件，而不是在此组件中声明src状态，将有助于您。所以在这个组件中，onChange={() => setSrc(newVal)}，其中setSrc作为prop传递给了Select组件。

或者，我建议将evt.target.value存储为一个状态，并在onChange事件中更新该值。

const [chosenImg, setChosenImg] = useState()
const [src, setSrc] = useState(require("../data/sprites/bulbasaur.png"));

useEffect(() => {
setSrc(require(`../data/sprites/${chosenImg}.png`))

}, [chosenImg]);

然后：

onChange={()=> setChosenImg(evt.target.value)}

Wie +0

Antwort hinzufügen 关闭回复

P粉200138510

Antwort

Beliebte Themen

Mehr>

• CakePHP-Tutorial
• Laravel-Tutorial
• PHP-Tutorial
• Java-Tutorial

Populäre Artikel

• Die Royal Mint und RNLI bündeln ihre Kräfte, um 200 Jahre Lebensrettung zu feiern
• Bitgert vs Neiro vs Floki Inu – Die bessere Investition im Jahr 2024?
• Wie spielt man das Strategie-Handyspiel „Three Kingdoms War'? Einsteigerleitfaden und Tipps für das Spiel „Three Kingdoms War'.
• 吟游战记科技树怎么点 吟游战记如何点亮科技树
• So übertragen Sie Dateien und Programme auf einen neuen Computer: 4 einfache Optionen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1404018
• 
  php入门教程之一周学会PHP

  4232955
• 
  JAVA 初级入门视频教程

  2424423

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1404018
• 
  JAVA 初级入门视频教程

  2424423
• 
  小甲鱼零基础入门学习Python视频教程

  498672
• 
  Web前端开发极速入门

  214244
• 
  零基础精通 PS 视频教程

  860888

• 
  【web前端】Node.js快速入门

  4796
• 
  国外Web开发全栈课程全集

  3714
• 
  Go语言实战之 GraphQL

  3194
• 
  550W粉丝大佬手把手从零学JavaScript

  566
• 
  python大神Mosh，零基础小白6小时完全入门

  16360

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [Bootstrap-Vorlage] Webvorlage für Bio-Obst- und Gemüselieferanten Bootstrap5
• [Backend-Vorlage] Bootstrap3 multifunktionale Dateninformations-Hintergrundverwaltung, responsive Webseitenvorlage – Novus
• [Bootstrap-Vorlage] Webseitenvorlage für die Immobilienressourcen-Serviceplattform Bootstrap5
• [Bootstrap-Vorlage] Einfache Webvorlage für Lebenslaufinformationen Bootstrap4
• [Bootstrap-Vorlage] Bootstrap-Responsive Breitbild-Website-Vorlage für Buchbildung – DREAMLIFE
• [Backend-Vorlage] Responsive blaue Enterprise-CMS-Hintergrundverwaltungssystemvorlage im MAC-Stil
• [Backend-Vorlage] Responsives Hintergrundmanagementsystem mit Farbverlauf, Website-Vorlage – Usinessbox
• [Bootstrap-Vorlage] Responsive Website-Vorlage für Gemüse- und Obstgeschäfte – Organio

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Answer 1

我相信，将src状态放在父组件中，通过将setSrc作为prop传递给该组件，而不是在此组件中声明src状态，将有助于您。所以在这个组件中，onChange={() => setSrc(newVal)}，其中setSrc作为prop传递给了Select组件。

或者，我建议将evt.target.value存储为一个状态，并在onChange事件中更新该值。

const [chosenImg, setChosenImg] = useState()
const [src, setSrc] = useState(require("../data/sprites/bulbasaur.png"));

useEffect(() => {
setSrc(require(`../data/sprites/${chosenImg}.png`))

}, [chosenImg]);

然后：

onChange={()=> setChosenImg(evt.target.value)}