如何使用钩子在 React 中显示所选项目的相应图像

Question

主要目标是能够从菜单中 select 一个口袋妖怪，一旦用户 select 编辑了一个口袋妖怪，下面的图像就会变为显示口袋妖怪的匹配图像。（例如，默认情况下，Bulbasaur 是 selected 并且显示 Bulbasaur 的图像。一旦用户选择 Charmander，Bulbasaur 的图像就会变为 Charmander。）

两个主要组件是 StarterSelector 包含带有所有选项的下拉菜单和 StarterShower 包含图像。

目前，我的菜单工作正常，但我正在尝试弄清楚如何在菜单中向 selected 口袋妖怪显示相应的图像。

我试图添加一个 onChange 函数，一旦菜单中的项目被 selected 将处理逻辑，但我不知道如何使它们一起工作。

App.js

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import StarterSelector from "./StarterSelector";
import StarterShower from "./StarterShower";

function App() {
  const [starterList, setStarterList] = useState([
    { id: 1, name: "Bulbasaur" },
    { id: 2, name: "Charmander" },
    { id: 3, name: "Squirtle" },
  ]);

  const [imgList, setImgList] = useState([
    { id: 1, image: "/assets/img/bulbasaur.png" },
    { id: 2, image: "/assets/img/charmander.png" },
    { id: 3, image: "/assets/img/squirtle.png" },
  ]);

  return (
    <div className="App">
      <header className="App-header">
        <StarterSelector starterList={starterList} />
        <StarterShower imgList={imgList} />
      </header>
    </div>
  );
}

export default App;

StarterSelector.js

    import React, { useState } from "react";
    import StarterShower from "./StarterShower";
    
    export default function StarterSelector({ starterList }) {
      const onChangePokemon = (imgList) => {
        alert("Pokemon changed");
      };
    
      return (
        <div>
          Pick your favorite pokemon :
          <select onChange={onChangePokemon}>
            {starterList.map((starterList) => (
              <option key={starterList.id} value={starterList.name}>
                {starterList.name}
              </option>
            ))}
          </select>
        </div>
      );
    }

StarterShower.js

import React, { useState } from "react";

export default function StarterShower({ imgList }) {
  return (
    <section>
      {imgList.map((imgList) => {
        return <img src={imgList.image} alt={imgList.id}></img>;
      })}
    </section>
  );
}

Answer 1

这可行，您只需获取目标的值，在本例中为名称，但最好将 id 作为 <option> 值。因此，您获取该值并搜索列表中的项目，仅此而已:)

import React, { useState, useEffect } from "react";
import StarterShower from "./StarterShower";

export default function StarterSelector({ starterList }) {
  const [selectedPokemon, setSelectedPokemon] = useState();

  const onChangePokemon = (event) => {
    setSelectedPokemon(
      starterList.find((pokemon) => pokemon.name === event.target.value)
    );
  };

  useEffect(() => {
    console.log("New pokemon selected: ", selectedPokemon);
  }, [selectedPokemon]);

  return (
    <div>
      Pick your favorite pokemon:
      <select onChange={onChangePokemon}>
        {starterList.map((starterList) => (
          <option key={starterList.id} value={starterList.name}>
            {starterList.name}
          </option>
        ))}
      </select>
    </div>
  );
}

如何使用钩子在 React 中显示所选项目的相应图像

How to display corresponding image from selected item in React using hooks

reactjs

react-hooks