如何从自定义渲染选项的React MUI Autocomplete获取选中项？

问题核心是自定义renderOption时没有传递MUI内置的props到根元素，导致组件无法识别选项的点击事件，进而无法正确返回选中值。

修复步骤 #

• 在renderOption的根组件（这里是Box）上展开所有props，MUI的props包含了点击选中、状态绑定等必要逻辑，必须传递才能让组件正常工作。
• 无需手动设置key，props中已经包含了正确的key值，展开后会自动应用。

修正后的代码 #

const renderOption = (props, option) => {
  const color = option.status ? 'green' : 'red';
  // 展开props到根Box，保留MUI的内置事件与属性
  return (
    <Box {...props} display="flex" justifyContent="start" alignItems="center" sx={{
        padding: '0 15px', 
        cursor: 'pointer', 
        '&:hover': {
          backgroundColor:'#d6edff'
      }}}>
      <Box width={10} height={10} marginRight={5} borderRadius="50%" bgcolor={color} />
      <div>{option.nickname}</div>
    </Box>
  );
};

<Autocomplete   
  options={options}
  getOptionLabel={(option) => option.nickname}
  renderOption={renderOption} 
  renderInput={(params) => <TextField {...params} 
    variant="outlined" 
    sx={{
        width: '15rem',
        backgroundColor: 'white',
        '& input': {
          height: '25px',
          padding: 0
        },
        '& label': {
          transform: 'none',
          marginTop: 8,
          marginLeft: 10              
        },
        '& .MuiInputBase-root': { padding: 0 },
        '& legend': { display: 'none' }
      }}
      label="Список участников"
  />}
  onInputChange={updateSearch}
  onChange={(event, value) => console.log('onChange', value)} // 现在能拿到完整的option对象
  onSelect={(event, value) => console.log('onSelect', event, value)} // value不再是undefined
/>

原理说明 #

MUI的renderOption提供的props包含了onClick、role、aria-selected等关键属性，这些是组件识别选项选中状态的核心。如果不传递这些props，点击选项时无法触发组件内部的选中逻辑，导致onChange/onSelect无法获取正确的value。

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