本文介绍如何使用 React 的 useState 和状态提升实现两个联动下拉框：当用户选择颜色后，食物下拉框自动过滤并仅显示匹配该颜色的食物项。

本文介绍如何使用 react 的 `usestate` 和状态提升实现两个联动下拉框：当用户选择颜色后，食物下拉框自动过滤并仅显示匹配该颜色的食物项。

在 React 应用中，组件间的联动依赖于状态（state）驱动的渲染逻辑，而非直接操作 DOM（如 document.getElementById()）。你当前的 Dropdown 组件是无状态的、彼此隔离的，因此无法感知颜色选择变化——这正是需要引入 useState 并通过父组件统一管理状态的核心原因。

✅ 正确实现思路：状态提升 + 条件过滤

首先，在 HomePage 中声明一个共享状态 selectedColor，用于存储用户选中的颜色，并将其作为 prop 传递给两个 Dropdown 组件；同时，为颜色下拉框绑定 onChange 事件，更新该状态：

// page.js
'use client';

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

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

  // 动态过滤食物：仅保留 color 匹配 selectedColor 的项
  const filteredFoods = Object.entries(foods.food_types)
    .filter(([, food]) => food.color === selectedColor)
    .map(([name]) => name);

  return (
    <div>
      <Dropdown 
        type="colors" 
        value={selectedColor} 
        onChange={setSelectedColor} 
      />
      <Dropdown 
        type="food_types" 
        options={filteredFoods} 
        disabled={!selectedColor} 
      />
    </div>
  );
}

? 注意：我们不再让 Dropdown 自行读取 foods.json 或处理过滤逻辑，而是由父组件完成数据准备，保持组件职责单一。

Orderly Sdk React Hooks

Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。

下载

? 更新 Dropdown 组件（支持受控模式）

修改 data-import.js，使其支持受控组件行为（即通过 value 和 onChange 实现双向绑定），并兼容不同类型的渲染逻辑：

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

export default function Dropdown({ 
  type, 
  value, 
  onChange, 
  options = [], 
  disabled = false 
}) {
  const foods = require('../data/foods.json'); // 或使用 import（需确保构建器支持）

  let selectOptions;

  if (type === 'colors') {
    selectOptions = foods.colors.map(color => (
      <option key={color} value={color}>{color}</option>
    ));
  } else if (type === 'food_types') {
    selectOptions = options.length > 0 
      ? options.map(food => (
          <option key={food} value={food}>{food}</option>
        ))
      : <option value="">请选择颜色以筛选食物</option>;
  }

  return (
    <select
      value={value || ''}
      onChange={(e) => onChange?.(e.target.value)}
      disabled={disabled}
      style={{ margin: '8px' }}
    >
      <option value="" disabled>
        {type === 'colors' ? '选择颜色' : '选择食物'}
      </option>
      {selectOptions}
    </select>
  );
}

⚠️ 关键注意事项

• 避免在组件内直接操作 DOM：React 推荐声明式数据流，useState + onChange 是标准解法；
• JSON 导入路径需正确：若使用 import foods from '../data/foods.json'，请确认你的打包工具（如 Next.js）已启用 JSON 导入支持；
• 空状态友好：当 selectedColor 为空时，应禁用食物下拉框并提示用户先选颜色，提升体验；
• 性能考量（进阶）：若食物数据量极大，可考虑 useMemo 缓存 filteredFoods，但本例中无需过度优化。

✅ 总结

联动下拉框的本质是「状态驱动视图」：父组件持有共享状态 → 子组件接收状态与更新函数 → 视图随状态自动重渲染。掌握 useState 与受控组件模式，是构建交互式 React UI 的基石。务必摒弃命令式 DOM 操作思维，转向声明式数据流设计。