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
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 !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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)}