如何在 React 中根据用户选择动态更新下拉列表内容-html教程-PHP中文网

如何在 React 中根据用户选择动态更新下拉列表内容

本文介绍如何使用 React 的 useState 和组件间状态传递，实现在颜色选择后动态过滤并更新食物下拉列表，确保两个组件联动响应用户输入。

本文介绍如何使用 react 的 `usestate` 和组件间状态传递，实现在颜色选择后动态过滤并更新食物下拉列表，确保两个 `

要实现“选中颜色 → 动态过滤食物列表”的交互逻辑，核心在于状态管理与父子组件通信。当前代码中，两个 Dropdown 组件彼此独立、无状态共享，因此无法感知对方的选择变化。React 要求此类响应式更新必须通过 useState 管理状态，并将状态及更新函数向下传递（即“提升状态到共同父组件”）。

以下是完整、可运行的解决方案：

✅ 步骤一：在父组件中声明并管理共享状态

修改 page.js，引入 useState，存储当前选中的颜色，并将其作为 props 传给食物下拉组件：

Auth0 React

已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。

下载

// app/page.js
'use client';

import Dropdown from './data-import';

export default function HomePage() {
  const [selectedColor, setSelectedColor] = useState('');

  return (
    <div>
      <dropdown type="colors" value="{selectedColor}" onchange="{(color)"> setSelectedColor(color)} 
      />
      <dropdown type="food_types" selectedcolor="{selectedColor}"></dropdown></dropdown>
</div>
  );
}

⚠️ 注意：需在文件顶部添加 import { useState } from 'react';

✅ 步骤二：增强 Dropdown 组件以支持受控模式与条件过滤

更新 data-import.js，使其支持：

颜色下拉框为受控组件（绑定 value + onChange）；
食物下拉框根据 selectedColor 动态过滤选项；

// app/data-import.js
'use client';

import foods from '../data/foods.json';

export default function Dropdown({ type, value, onChange, selectedColor }) {
  // 颜色下拉：简单渲染所有颜色
  if (type === 'colors') {
    return (
      <select value="{value}" onchange="{(e)"> onChange(e.target.value)}
      >
        <option value="">请选择颜色</option>
        {foods.colors.map((color) => (
          <option key="{color}" value="{color}">{color.charAt(0).toUpperCase() + color.slice(1)}</option>
        ))}
      </select>
    );
  }

  // 食物下拉：仅显示匹配 selectedColor 的食物（若已选颜色）
  const filteredFoods = selectedColor
    ? Object.entries(foods.food_types)
        .filter(([, food]) => food.color === selectedColor)
        .map(([name]) => name)
    : Object.keys(foods.food_types);

  return (
    <select><option value="">请选择食物</option>
      {filteredFoods.map((food) => (
        <option key="{food}" value="{food}">
          {food.charAt(0).toUpperCase() + food.slice(1)}
        </option>
      ))}
    </select>
  );
}

✅ 关键要点说明

不要用 document.getElementById 或 window.onload：React 组件应完全基于声明式状态驱动，而非直接操作 DOM。
受控组件原则：
过滤逻辑放在渲染层：利用 selectedColor 作为依赖项，在每次渲染时重新计算 filteredFoods，React 会自动触发重绘。
JSON 数据结构适配：foods.food_types 是对象，需用 Object.entries() 提取键值对，再按 color 字段过滤。