如何通过useState实现下拉选择？BreedsSelect组件代码修改求助

• 基于犬种列表创建下拉选择组件BreedsSelect（对应文件BreedsSelect.js）：
  • 使用select和option标签实现
  • 组件需接收名为breeds的数组类型props，示例用法：<BreedsSelect breeds={breeds} />
• 在DogListContainer组件中引入并加载BreedsSelect组件
• 在DogListContainer组件中通过useState定义selectedBreed和setSelectedBreed，用于存储选中的犬种
• 实现下拉选择时同步更新选中状态：
  • 为BreedsSelect组件添加所需props以触发状态更新
  • 将selectedBreed作为select标签的value属性值

修改后的BreedsSelect.js #

export const BreedsSelect = ({ breeds, selectedBreed, onBreedChange }) => {
  return (
    <div>
      <select 
        value={selectedBreed} 
        onChange={(e) => onBreedChange(e.target.value)}
      >
        <option value="">请选择犬种</option>
        {breeds && Object.keys(breeds).map(breed => (
          <option key={breed} value={breed}>{breed}</option>
        ))}
      </select>
    </div>
  )
}

核心修改点 #

• 移除组件内部的useState，改用父组件传入的selectedBreed和onBreedChange props实现受控组件逻辑
• 修复原代码的拼写错误：<opition>改为<option>
• 添加onChange事件监听，将选中值传递给父组件的状态更新函数
• 适配API返回的breeds对象结构，通过Object.keys遍历生成选项
• 增加默认提示选项，与初始空状态对应

修改后的DogListContainer.js #

import { useEffect, useState } from 'react' // DO NOT DELETE
import { BreedsSelect } from './BreedsSelect'
export const DogListContainer = () => {
  const [breeds, setBreeds] = useState(null)
  const [selectedBreed, setSelectedBreed] = useState("")

  useEffect(() => {
    fetch('https://dog.ceo/api/breeds/list/all')
      .then(res => res.json())
      .then(data => {
        console.log(data.message)
        setBreeds(data.message)
      })
  }, [])

  const handleBreedChange = (breed) => {
    setSelectedBreed(breed)
  }

  return (
    <BreedsSelect 
      breeds={breeds} 
      selectedBreed={selectedBreed} 
      onBreedChange={handleBreedChange} 
    />
  )
}

核心修改点 #

• 新增selectedBreed状态，初始值设为空字符串匹配默认选项
• 定义handleBreedChange函数，用于接收子组件传递的选中值并更新状态
• 给BreedsSelect组件传递selectedBreed和onBreedChange props，完成父子组件的状态同步

内容的提问来源于stack exchange，提问作者user20280341