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