React MUI项目：多卡片Dropdown同步变更，需实现单卡片独立控制

问题原因 #

所有业务卡片共享了同一个状态变量来控制下拉框的选中值，导致任意卡片修改下拉选项时，所有卡片的状态都会同步更新。

解决方案 #

方案1：给每个下拉框独立维护状态

把下拉框封装成独立组件，内部维护自身的选中状态，避免共用父组件状态：

// VendorDropdown.jsx
import { useState } from 'react';
import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';

const VendorDropdown = () => {
  const [selectedVendor, setSelectedVendor] = useState('');

  const handleChange = (event) => {
    setSelectedVendor(event.target.value);
    // 如需将选中值传递给父组件，可添加回调
    // props.onVendorChange?.(event.target.value);
  };

  return (
    <FormControl fullWidth>
      <InputLabel id="vendor-select-label">供应商</InputLabel>
      <Select
        labelId="vendor-select-label"
        id="vendor-select"
        value={selectedVendor}
        label="供应商"
        onChange={handleChange}
      >
        <MenuItem value="Surya Kumar Yadav">Surya Kumar Yadav</MenuItem>
        <MenuItem value="Eswar">Eswar</MenuItem>
      </Select>
    </FormControl>
  );
};

export default VendorDropdown;

之后在业务卡片中直接引入这个组件即可，每个卡片的下拉框会独立维护自己的选中状态。

方案2：父组件统一管理多卡片状态

如果需要在父组件收集所有卡片的选中值，可通过卡片唯一标识（如ID）绑定对应状态：

// 父组件
import { useState } from 'react';
import BusinessCard from './BusinessCard';

const Dashboard = () => {
  // 业务卡片数据需包含唯一ID
  const cardList = [
    { id: 'card-1', title: '业务卡片1' },
    { id: 'card-2', title: '业务卡片2' }
  ];
  // 用对象存储每个卡片的选中值，key为卡片ID
  const [vendorSelections, setVendorSelections] = useState({});

  const handleVendorChange = (cardId, vendor) => {
    setVendorSelections(prev => ({
      ...prev,
      [cardId]: vendor
    }));
  };

  return (
    <div className="dashboard">
      {cardList.map(card => (
        <BusinessCard
          key={card.id}
          cardId={card.id}
          title={card.title}
          selectedVendor={vendorSelections[card.id] || ''}
          onVendorChange={(vendor) => handleVendorChange(card.id, vendor)}
        />
      ))}
    </div>
  );
};

export default Dashboard;

业务卡片中的下拉框使用父组件传递的状态和回调：

// BusinessCard.jsx
import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';

const BusinessCard = ({ cardId, title, selectedVendor, onVendorChange }) => {
  const handleChange = (event) => {
    onVendorChange(event.target.value);
  };

  return (
    <div className="business-card">
      <h3>{title}</h3>
      <FormControl fullWidth>
        <InputLabel id={`vendor-label-${cardId}`}>供应商</InputLabel>
        <Select
          labelId={`vendor-label-${cardId}`}
          id={`vendor-select-${cardId}`}
          value={selectedVendor}
          label="供应商"
          onChange={handleChange}
        >
          <MenuItem value="Surya Kumar Yadav">Surya Kumar Yadav</MenuItem>
          <MenuItem value="Eswar">Eswar</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
};

export default BusinessCard;

方案选择 #

• 若无需父组件干预下拉框状态，优先选方案1，实现更简洁；
• 若需统一管理所有卡片的选中值（如批量提交），则用方案2。

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