React类组件实现二级联动下拉：根据选中分类动态展示商品选项

步骤1：修正构造函数语法并添加选中状态 #

你提供的构造函数存在语法错误，this.state 必须放在 constructor 的花括号内部。同时需要新增 selectedCategory 状态来记录当前选中的分类ID：

constructor(props) {
  super(props);
  this.state = {
    categories: [
      { id: 1, category_name: "Powertools" },
      { id: 2, category_name: "Consumables" }
    ],
    items: [
      { id: 1, item_name: "Grinder", category_id: 1 },
      { id: 2, item_name: "Drill", category_id: 1 },
      { id: 3, item_name: "Welding rod", category_id: 2 }
    ],
    selectedCategory: 1 // 默认选中第一个分类
  };
  // 绑定事件处理函数到当前实例
  this.handleCategoryChange = this.handleCategoryChange.bind(this);
}

步骤2：实现分类选择变化的处理函数 #

编写函数更新选中的分类状态：

handleCategoryChange(e) {
  this.setState({
    selectedCategory: parseInt(e.target.value, 10)
  });
}

步骤3：实现动态过滤商品列表 #

根据当前选中的分类ID，过滤出对应的商品：

getFilteredItems() {
  const { items, selectedCategory } = this.state;
  return items.filter(item => item.category_id === selectedCategory);
}

步骤4：渲染联动的下拉菜单 #

在render()方法中渲染两个下拉组件，商品下拉菜单使用过滤后的列表：

render() {
  const { categories, selectedCategory } = this.state;
  const filteredItems = this.getFilteredItems();

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '10px' }}>
        <label>分类：</label>
        <select value={selectedCategory} onChange={this.handleCategoryChange}>
          {categories.map(category => (
            <option key={category.id} value={category.id}>
              {category.category_name}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label>商品：</label>
        <select>
          {filteredItems.map(item => (
            <option key={item.id} value={item.id}>
              {item.item_name}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

完整组件代码 #

把以上部分整合为完整的类组件：

import React from 'react';

class ProductSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: [
        { id: 1, category_name: "Powertools" },
        { id: 2, category_name: "Consumables" }
      ],
      items: [
        { id: 1, item_name: "Grinder", category_id: 1 },
        { id: 2, item_name: "Drill", category_id: 1 },
        { id: 3, item_name: "Welding rod", category_id: 2 }
      ],
      selectedCategory: 1
    };
    this.handleCategoryChange = this.handleCategoryChange.bind(this);
  }

  handleCategoryChange(e) {
    this.setState({
      selectedCategory: parseInt(e.target.value, 10)
    });
  }

  getFilteredItems() {
    const { items, selectedCategory } = this.state;
    return items.filter(item => item.category_id === selectedCategory);
  }

  render() {
    const { categories, selectedCategory } = this.state;
    const filteredItems = this.getFilteredItems();

    return (
      <div style={{ padding: '20px' }}>
        <div style={{ marginBottom: '10px' }}>
          <label>分类：</label>
          <select value={selectedCategory} onChange={this.handleCategoryChange}>
            {categories.map(category => (
              <option key={category.id} value={category.id}>
                {category.category_name}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label>商品：</label>
          <select>
            {filteredItems.map(item => (
              <option key={item.id} value={item.id}>
                {item.item_name}
              </option>
            ))}
          </select>
        </div>
      </div>
    );
  }
}

export default ProductSelector;

关键说明 #

• 状态绑定：必须通过bind(this)或者箭头函数确保事件处理函数中的this指向组件实例
• 类型转换：下拉菜单的value是字符串类型，需要转为整数和category_id匹配
• 过滤逻辑：使用Array.filter()根据选中的分类ID动态筛选商品，每次状态更新后React会自动重新渲染商品下拉菜单

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