Apabila acara pemilihan berubah, animasi CSS mencetuskan kesan yang sepadan.

Question

Saya cuba membuat aplikasi React, kini saya mempunyai kotak input pilih dengan beberapa Pokémon di dalamnya, apa yang perlu saya lakukan ialah apabila pilihan berubah (iaitu Pokémon berubah) sprite Pokémon akan membuat animasi gegaran Kecil. Pada masa ini saya hanya mempunyai sprite yang berubah dan audio yang dimainkan apabila nilai pemilihan berubah. Bagaimanakah saya boleh melaksanakan fungsi ini? Saya telah mencuba menggunakan onChange和styled-components untuk menukar gayanya tetapi tidak dapat berfungsi, animasi hanya menyala apabila halaman dimuatkan. Ini kod semasa saya:

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

Terima kasih!

P粉200138510181 hari yang lalu361

membalas semua(1)saya akan balas

Saya percaya, meletakkan keadaan src dalam komponen induk, dengan menghantar setSrc sebagai prop kepada komponen itu, dan bukannya mengisytiharkan keadaan src dalam komponen ini, akan membantu anda. Jadi dalam komponen ini, onChange={() => setSrc(newVal)}, setSrc dihantar sebagai prop kepada komponen Pilih.

Sebagai alternatif, saya syorkan anda menyimpan evt.target.value sebagai keadaan dan mengemas kini nilai dalam acara onChange.

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

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

}, [chosenImg]);

Kemudian:

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

Batalbalas

menerbitkan

• Rumah

• Kursus

• Soal Jawab

• saya

• Rumah
• Kursus
• Artikel
• Soal Jawab
• Kamus
• Manual
• Muat turun
• Topik

Rumah

Artikel

Soal Jawab

Kursus

Topik

Muat turun

Permainan

Kamus

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

Answer 1

Saya percaya, meletakkan keadaan src dalam komponen induk, dengan menghantar setSrc sebagai prop kepada komponen itu, dan bukannya mengisytiharkan keadaan src dalam komponen ini, akan membantu anda. Jadi dalam komponen ini, onChange={() => setSrc(newVal)}, setSrc dihantar sebagai prop kepada komponen Pilih.

Sebagai alternatif, saya syorkan anda menyimpan evt.target.value sebagai keadaan dan mengemas kini nilai dalam acara onChange.

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

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

}, [chosenImg]);

Kemudian:

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