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!

1

0

0

P粉200138510

balas

membalas semua(1)

saya akan balas tutup

P粉9905682832024-04-02 00:10:18 Tingkat 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)}

Suka +0

Tambah Balasan 关闭回复

P粉200138510

balas

Topik popular

Lagi>

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

Artikel popular

• Royal Mint dan RNLI bergabung tenaga untuk meraikan 200 tahun menyelamatkan nyawa
• Bitgert lwn Neiro lwn Floki Inu – Pelaburan yang Lebih Baik pada 2024?
• Bagaimana untuk bermain permainan mudah alih strategi Perang Tiga Kerajaan?
• Cara menyalakan pokok teknologi dalam The Bard Wars Cara menyalakan pokok teknologi dalam The Bard Wars
• Cara Memindahkan Fail dan Program ke Komputer Baharu: 4 Pilihan Mudah

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1404018
• 
  Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu

  4232956
• 
  Tutorial Video Permulaan JAVA

  2424425

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1404018
• 
  Tutorial Video Permulaan JAVA

  2424425
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  498673
• 
  Pengenalan pantas kepada pembangunan bahagian hadapan web

  214244
• 
  Kuasai tutorial video PS dari awal

  860889

• 
  [Web front-end] Permulaan pantas Node.js

  4796
• 
  Koleksi lengkap kursus timbunan penuh pembangunan web asing

  3714
• 
  Gunakan GraphQL praktikal bahasa

  3194
• 
  Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah

  566
• 
  Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam

  16361

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

• [butang borang] kod hubungan borang mesej perusahaan jQuery
• [Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5
• [Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk
• [butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan
• [Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS
• [kesan khas html5] Permainan kotak menolak html5 klasik
• [Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej
• [Kesan album foto] Kesan zum hover kulit album peribadi CSS3

• [Templat Bootstrap] Templat web pembekal buah-buahan dan sayur-sayuran organik Bootstrap5
• [templat bahagian belakang] Pengurusan latar belakang maklumat data pelbagai fungsi Bootstrap3 templat halaman web responsif-Novus
• [Templat Bootstrap] Templat halaman web platform perkhidmatan sumber hartanah Bootstrap5
• [Templat Bootstrap] Templat web maklumat resume ringkas Bootstrap4
• [Templat Bootstrap] templat laman web pendidikan buku skrin lebar bootstrap responsif-DREAMLIFE
• [templat bahagian belakang] Templat sistem pengurusan latar belakang CMS perusahaan biru responsif gaya MAC
• [templat bahagian belakang] Sistem pengurusan latar belakang suasana kecerunan responsif tapak web template-kotak kegunaan
• [Templat Bootstrap] Templat tapak web kedai sayur dan buah-buahan responsif-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)

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu

Tentang kita Penafian Sitemap

Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

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