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!

P粉200138510181 Tage vor362

Antworte allen(1)Ich werde antworten

我相信，将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)}

StornierenAntwort

veröffentlichen

• Heim

• Kurs

• Fragen und Antworten

• Mein

• Heim
• Kurs
• Artikel
• Fragen und Antworten
• Wörterbuch
• Handbuch
• Herunterladen
• Thema

Heim

Artikel

Fragen und Antworten

Kurs

Thema

Herunterladen

Spiel

Wörterbuch

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

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)}