Lorsque l'événement de sélection change, l'animation CSS déclenche l'effet correspondant.

Question

J'essaie de créer une application React, maintenant j'ai une zone de saisie de sélection contenant des Pokémon, ce que je dois faire, c'est chaque fois que la sélection change (c'est-à-dire que le Pokémon change), le sprite Pokémon fera une petite animation de tremblement. Actuellement, j'ai juste un sprite qui change et un audio qui est joué lorsque la valeur de sélection change. Comment puis-je implémenter cette fonctionnalité ? J'ai essayé d'utiliser les de onChange和styled-components pour en changer le style, mais je n'arrive pas à le faire fonctionner, l'animation ne se déclenche que lorsque la page se charge. Voici mon code actuel :

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

Merci !

1

0

0

P粉200138510

répondre

répondre à tous(1)

je répondrai Fermer

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

Je pense que mettre l'état src dans le composant parent, en passant setSrc comme accessoire à ce composant, au lieu de déclarer l'état src dans ce composant, vous aidera. Ainsi, dans ce composant, onChange={() => setSrc(newVal)}, setSrc est passé comme accessoire au composant Select.

Alternativement, je recommande de stocker evt.target.value en tant qu'état et de mettre à jour la valeur dans l'événement onChange.

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

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

}, [chosenImg]);

Puis :

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

Comme +0

Ajouter une réponse 关闭回复

P粉200138510

répondre

Sujets populaires

Plus>

• Tutoriel CakePHP
• Tutoriel Laravel
• Tutoriel PHP
• Tutoriel Java

Articles populaires

• La Monnaie royale et la RNLI unissent leurs forces pour célébrer 200 ans de sauvetage
• Bitgert vs Neiro vs Floki Inu – Le meilleur investissement en 2024 ?
• Comment jouer au jeu mobile de stratégie Three Kingdoms War ? Guide du débutant et astuces pour le jeu Three Kingdoms War ?
• Comment éclairer l'arbre technologique dans The Bard Wars Comment éclairer l'arbre technologique dans The Bard Wars
• Comment transférer des fichiers et des programmes vers un nouvel ordinateur : 4 options simples

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1404018
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4232952
• 
  Tutoriel vidéo JAVA pour débutants

  2424417

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1404018
• 
  Tutoriel vidéo JAVA pour débutants

  2424417
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  498671
• 
  Introduction rapide au développement web front-end

  214244
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  860887

• 
  [Web front-end] Démarrage rapide de Node.js

  4796
• 
  Collection complète de cours full-stack de développement Web étranger

  3714
• 
  Aller au langage pratique GraphQL

  3194
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  566
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  16360

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle d'amorçage] Modèle Web de fournisseur de fruits et légumes biologiques Bootstrap5
• [modèle de back-end] Modèle de page Web réactive de gestion d'arrière-plan d'informations de données multifonctionnelles Bootstrap3-Novus
• [Modèle d'amorçage] Modèle de page Web de plate-forme de services de ressources immobilières Bootstrap5
• [Modèle d'amorçage] Modèle Web d'informations de CV simples Bootstrap4
• [Modèle d'amorçage] Modèle de site Web d'éducation de livre grand écran réactif bootstrap-DREAMLIFE
• [modèle de back-end] Modèle de système de gestion d'arrière-plan CMS d'entreprise bleu réactif de style MAC
• [modèle de back-end] Modèle de site Web de système de gestion d'arrière-plan d'atmosphère dégradé réactif-usinessbox
• [Modèle d'amorçage] Modèle de site Web réactif pour magasin de légumes et de fruits-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)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

À propos de nous Clause de non-responsabilité Sitemap

Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

Answer 1

Je pense que mettre l'état src dans le composant parent, en passant setSrc comme accessoire à ce composant, au lieu de déclarer l'état src dans ce composant, vous aidera. Ainsi, dans ce composant, onChange={() => setSrc(newVal)}, setSrc est passé comme accessoire au composant Select.

Alternativement, je recommande de stocker evt.target.value en tant qu'état et de mettre à jour la valeur dans l'événement onChange.

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

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

}, [chosenImg]);

Puis :

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