css动画在选择事件更改激发反应时激发

Question

我正在尝试制作一个react应用程序，现在我有一个带有一些口袋妖怪的select输入，我需要制作它，以便每当select更改(=口袋妖怪更改(时，口袋妖怪精灵都会做一点抖动动画。目前，我只有一个更改的精灵和一个每当选择值更改时播放的音频。如何做到这一点？我试着用styled-components选择onChange来改变它的风格，但我无法让它工作，动画只有在加载页面时才会启动这是我目前的代码：
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 };

谢谢！

Answer 1

我相信，与其在这个组件中声明src状态，不如将状态放在父组件中，并将setSrc作为道具传递给这个组件会对您有所帮助。因此，在这个组件onChange={() => setSrc(newVal)}中，setSrc作为道具传递给Select组件。

或者，我会考虑将evt.target.value存储为一个状态，然后在Change上更新该值。

const [chosenImg, setChosenImg] = useState()
const [src, setSrc] = useState(require("../data/sprites/bulbasaur.png"));
useEffect(() => {
setSrc(require(`../data/sprites/${chosenImg}.png`))
}, [chosenImg]);

然后：

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