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 !

P粉200138510230 Il y a quelques jours480

répondre à tous(1)je répondrai

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

Annulerrépondre

publier

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

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved

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