请问有什么方法可以让我访问与 JavaScript 下拉列表中选择的值相匹配的键吗？

Question

我正在学习 Javascript / React，我一直在做这个 React 项目来制作模因，我拥有关于对象数组中模因的所有数据，但我现在被困了好几天都没有得到它做我想做的事。

每个对象内部都有一个名称和一个值，一个 ID 和一个值，一个带有图像 URL 的空白。我想在下拉列表中向用户显示名称，我想从下拉列表中访问 selected 名称的 ID 和空白值，以便我可以将图像提供给用户。

我试过将名称和 ID 提取到单独的字符串中并检查匹配的词，但有时 ID 的字符串值甚至不包含在名称的字符串值中，所以这在总而言之，现在我做的就像一种带有计数器的黑客攻击，每次调用 onChange 函数时计数器都会增加，我使用数字根据与数字匹配的索引来提供图像，但这随时都会给我错误的图像用户决定随机选择图像。这听起来可能有点抽象，所以我在这里包含了一些屏幕截图和我的代码 link 到所有程序所在的代码沙箱，希望能得到我需要的帮助。

她的是代码片段；

export default function MyComponent() {

  const [bulkImageArray, setBulkImageArray] = useState([]);
  const [counter, setCounter] = useState(1);
  const [imageUrls, setImageUrls] = useState();
  const [imagesNames, setImagesNames] = useState();


  // This is the function that should get me access to the object id value when any value is selected.
  function handleChange(event) {
    setCounter(counter + 1);
    console.log('You just selected: ' + event.target.value);
    // setImagesNames(event.target.value);
    setImagesNames(bulkImageArray[counter].name);
    setImageUrls(bulkImageArray[counter].blank);

    console.log(typeof event.target.value);
  }

    return (
      <div>
        <select onChange={handleChange}>
          {bulkImageArray.map((item) => (
            <option key={item.id}>
              {/* {item.id} */}
              {item.name}
            </option>
          ))}
        </select>

        <img src={imageUrls} alt={imagesNames} />

        <div>
          {bulkImageArray.map((item) => (
            <img
              style={{
                width: '400px',
                height: '400px',
                cursor: 'pointer',
              }}
              key={item.id}
              alt={item.name}
              src={item.blank}
            />
          ))}
        </div>
      </div>
    );
  }
}

截图：

对象结构数组：

单一对象结构：

select 上的函数：

用户select图片的下拉菜单：

我不知道所有这些信息是否足够，但这是完整项目的代码沙箱。

提前致谢。

Answer 1

您应该将 value={item.id} 添加到 option，以便 select onChange 可以 select 将值添加到 id，然后使用id 找到 selected 项目。

请问有什么方法可以让我访问与 JavaScript 下拉列表中选择的值相匹配的键吗？

Please is there any way i can get access to a key that matches a value selected on a dropdown in JavaScript?

javascript

reactjs

react-hooks

react-hook-form