如何将自定义MUI下拉组件的选中值传递至React主组件

你的自定义TriggerDropDown组件内部维护了独立的本地状态dropdownValue，但在选项变更时没有将新值传递给父组件，导致父组件的firstSelect和secondSelect无法同步更新。

通过让子组件接收父组件的状态和回调函数，将组件改为受控组件，实现父子组件的值同步。

1. 修改TriggerDropDown组件，添加回调传递选中值 #

调整组件props，接收父组件传入的value和onChange回调，移除不必要的本地状态，让父组件完全控制选中值：

import * as React from 'react';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Chip from '@mui/material/Chip';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
import { useLocation  } from 'react-router-dom';

export default function TriggerDropDown({ 
  inputLabelId, 
  dropdownId, 
  value,
  label, 
  onChange
}) {
  const location = useLocation();

  const handleChange = (event) => { 
    // 将新选中值传递给父组件
    onChange(event.target.value);
  };

  // 路由变化时重置选中值（按需保留）
  React.useEffect(() => {
    onChange(''); // 可替换为你需要的默认初始值
  }, [location, onChange])

  return (
    <FormControl sx={{ m: 1, minWidth: 220 }}>
      <InputLabel id={inputLabelId}>{label}</InputLabel>
      <Select 
        id={dropdownId} 
        value={value} 
        label={label} 
        onChange={handleChange}
      >
        <MenuItem value={-1}>
          <Chip size="medium" icon={<ArrowCircleDownIcon />} label="Decreasing" color="error" />
        </MenuItem>
        <MenuItem value={0}>
          <Chip size="medium" icon={<CheckCircleOutlineIcon />} label="No Trend" color="primary" />
        </MenuItem>
        <MenuItem value={1}>
          <Chip size="medium" icon={<ArrowCircleUpIcon />} label="Increasing" color="success" />
        </MenuItem>
      </Select>
    </FormControl>
  );
}

2. 在MainComponent中维护状态并传递给子组件 #

父组件维护两个下拉框的状态，给每个TriggerDropDown传递对应的value和更新状态的回调：

import React, { useState } from 'react';
import TriggerDropDown from '../components/triggerDropDown.js';

export default function MainComponent() {
  // 初始化下拉框状态
  const [firstSelect, setFirstSelect] = useState('');
  const [secondSelect, setSecondSelect] = useState('');

  return (
    <div>
      <TriggerDropDown 
        inputLabelId="Lbl_Id1" 
        dropdownId="Id1" 
        value={firstSelect} 
        label="First" 
        onChange={(newValue) => setFirstSelect(newValue)} 
      />
      <TriggerDropDown 
        inputLabelId="Lbl_Id2" 
        dropdownId="Id2" 
        value={secondSelect} 
        label="Second" 
        onChange={(newValue) => setSecondSelect(newValue)} 
      />
      
      {/* 测试：实时展示选中值 */}
      <div style={{margin: '16px'}}>
        第一个下拉选中值: {firstSelect}
        <br />
        第二个下拉选中值: {secondSelect}
      </div>
    </div>
  );
}

• 受控组件模式下，子组件的选中值完全由父组件状态控制，从根源避免了数据不同步问题。
• 若不需要路由变化时重置值，可删除子组件中的useEffect代码。

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