基于用户输入更新React组件：实现按选中颜色过滤食物下拉列表

嘿，我看你想实现选中颜色后自动过滤食物下拉列表的功能，之前用document.getElementById()和window.onload没成功对吧？这是因为React是状态驱动UI的框架，直接操作原生DOM会绕过React的更新机制，咱们得用React的方式来处理，核心思路是用状态跟踪选中的颜色，然后把这个状态传递给食物下拉组件来过滤选项。

步骤1：在父组件中管理选中颜色的状态 #

咱们需要在HomePage组件里用useState钩子来保存用户选中的颜色，同时给颜色下拉组件添加一个onChange事件，用来更新这个状态。

修改后的page.js代码：

'use client'
import { useState } from 'react';
import Dropdown from "./data-import";

export default function HomePage() {
  // 初始化选中颜色状态，默认可以设为空或者第一个颜色
  const [selectedColor, setSelectedColor] = useState('');

  // 处理颜色选择变化的函数
  const handleColorChange = (e) => {
    setSelectedColor(e.target.value);
  };

  return (
    <div>
      {/* 给颜色下拉组件添加onChange事件，传递选中值 */}
      <Dropdown 
        type="colors" 
        onChange={handleColorChange} 
        type_id="color-dropdown" 
      />
      {/* 把选中的颜色传递给食物下拉组件 */}
      <Dropdown 
        type="food_types" 
        selectedColor={selectedColor} 
        type_id="food-dropdown" 
      />
    </div>
  )
}

步骤2：修改Dropdown组件，接收props并过滤食物列表 #

现在咱们要更新data-import.js（也就是你的Dropdown组件），让它能接收父组件传递的onChange（给颜色下拉用）和selectedColor（给食物下拉过滤用），然后根据选中的颜色来过滤食物选项。

修改后的data-import.js代码：

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

export default function Dropdown({ type, type_id, onChange, selectedColor }) {
  let options;

  if (type === "food_types") {
    // 根据选中的颜色过滤食物：如果没选颜色就显示所有，否则只显示匹配颜色的
    const filteredFoods = Object.entries(foods[type]).filter(([_, foodData]) => {
      return selectedColor ? foodData.color === selectedColor : true;
    });

    // 生成过滤后的选项
    options = filteredFoods.map(([foodName, _]) => (
      <option key={foodName} value={foodName}>{foodName}</option>
    ));
  } else if (type === "colors") {
    options = foods[type].map((color) => (
      <option key={color} value={color}>{color}</option>
    ));
  }

  return (
    {/* 给select添加onChange事件（只有颜色下拉会用到） */}
    <select id={type_id} onChange={onChange}>
      {options}
    </select>
  );
}

为什么这样能行？ #

• 当用户在颜色下拉列表选择选项时，handleColorChange会更新HomePage里的selectedColor状态。
• React会因为状态变化重新渲染组件，把最新的selectedColor传递给食物下拉组件。
• 食物下拉组件接收到新的selectedColor后，会重新计算过滤后的食物列表，生成对应的选项，这样UI就自动更新啦~

这样就完全符合React的状态驱动逻辑，不用再去操作原生DOM，也不会出现状态和UI不一致的问题了。

备注：内容来源于stack exchange，提问作者how you doin