如何为可复用MUI下拉筛选组件设置默认选中值？

问题背景 #

用MUI的Select组件做表格状态筛选器，要求页面加载时默认显示Active项；同时这个下拉组件需要复用，希望通过props给不同实例设置不同默认选中值，但当前组件内设置defaultValue无效，移除后又触发受控组件错误。

解决方案 #

你的下拉组件是受控组件（通过value和onChange控制状态），所以默认值的控制应该放在父组件的state初始化中，而非子组件的defaultValue。具体步骤如下：

1. 移除子组件的defaultValue
   受控组件不需要defaultValue，它的状态完全由父组件传递的value控制，保留defaultValue会导致冲突，直接删掉即可。

2. 父组件初始化默认选中值
   将selectedValue的初始值设为Active对应的value（也就是0），同时初始化filterFn的默认逻辑，确保页面加载时表格自动过滤出Active数据。

3. （可选）支持自定义默认值props
   如果需要让组件更灵活，可给DropdownFltr添加defaultSelection props，但父组件仍需负责初始化自己的state。

修改后的代码 #

1. 下拉组件（DropdownFltr）

function DropdownFltr(props) {
  const classes = useStyles();
  const { error = null, options, prompt, onChange, value, ...other } = props;

  return(
    <FormControl className={classes.formControl} variant='outlined' >
      <InputLabel>{prompt}</InputLabel>
      <Select
        onChange={onChange}
        value={value}
        {...other}
        {...(error && {error: true, helperText: error})}
      >
        {options.map((option, id) => (
          <MenuItem
            key={option.id}
            value={option.value}
          >
            {option.label}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

export default DropdownFltr;

2. 父页面调用代码

// 初始化时直接设为Active对应的值0，同时设置默认过滤逻辑
const [filterFn, setFilterFn] = React.useState({ 
  fn: items => items.filter(x => x.status === 0) 
});
const [selectedValue, setSelectedValue] = React.useState(0);

// --- THE DROPDOWN OPTIONS ---
const status = [
  { id: 1, label: '...', value: '' },
  { id: 2, label: 'Active', value: 0 }, 
  { id: 3, label: 'Inactive', value: 1 }
];

// --- DROPDOWN FILTER HANDLER ---
const handleFilterValue = e => {
  setSelectedValue(e.target.value);
  const filterVal = (e.target.value).toString().toLowerCase();
  setFilterFn({
    fn: items => {
      if (filterVal === '') { return items; }
      else {
        return items.filter(x =>
          x.status.toString().toLowerCase().includes(filterVal)
        );
      }
    }
  });
};

// --- THE DROPDOWN FILTER ---
<DropdownFltr
  options={status}
  prompt='Status...'
  onChange={handleFilterValue}
  value={selectedValue}
/>

3. （可选）支持自定义默认值的组件扩展

如果需要让DropdownFltr支持通过props传递默认值（供父组件初始化使用），可以在父组件调用时新增props：

<DropdownFltr
  options={status}
  prompt='Status...'
  onChange={handleFilterValue}
  value={selectedValue}
  defaultSelection={0} // 新增props，父组件用它初始化state
/>

父组件初始化时即可使用该props：

const [selectedValue, setSelectedValue] = React.useState(props.defaultSelection || '');

这样不同的组件实例就能传递不同的默认选中值了。

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