如何在使用React单击下拉项时显示照片

npm install react react-dom

import React, { Component } from 'react';

class DropdownWithPhoto extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: null,
      dropdownItems: [
        { label: 'Option 1', photoUrl: '' },
        { label: 'Option 2', photoUrl: '' },
        { label: 'Option 3', photoUrl: '' },
      ],
    };
  }

  componentDidMount() {
    // 异步获取照片URL数据，并更新到dropdownItems数组中的每个下拉项对象的photoUrl字段
    this.fetchPhotoUrls();
  }

  fetchPhotoUrls = async () => {
    // 发送HTTP请求获取照片URL数据
    const response = await fetch('https://example.com/photo-data');
    const data = await response.json();

    // 更新dropdownItems数组中的每个下拉项对象的photoUrl字段
    const updatedItems = this.state.dropdownItems.map((item, index) => ({
      ...item,
      photoUrl: data[index].photoUrl,
    }));

    this.setState({ dropdownItems: updatedItems });
  };

  handleDropdownChange = (event) => {
    const selectedIndex = event.target.value;
    this.setState({ selectedItem: selectedIndex });
  };

  render() {
    const { selectedItem, dropdownItems } = this.state;

    return (
      <div>
        <select onChange={this.handleDropdownChange}>
          {dropdownItems.map((item, index) => (
            <option key={index} value={index}>
              {item.label}
            </option>
          ))}
        </select>
        {selectedItem !== null && (
          <img src={dropdownItems[selectedItem].photoUrl} alt="Selected Item" />
        )}
      </div>
    );
  }
}

export default DropdownWithPhoto;