MUI Autocomplete：清空输入选项时如何更新Redux Store？

针对你使用MUI多选Autocomplete组件时，需要在用户清空输入框时同步更新Redux Store的需求，直接调整onInputChange事件逻辑即可，以下是修改后的代码和关键说明：

修改后的完整代码 #

<Autocomplete
  multiple
  id="tags-outlined"
  options={filters}
  onInputChange={(event, newInputValue, reason) => {
    // 输入框内容变化（包括清空）时，同步更新Redux Store
    dispatch(appActions.setFilter({ label: newInputValue }));

    // 若需在清空时执行额外逻辑（比如清空已选标签），可添加判断
    if (!newInputValue) {
      // 示例：dispatch清空已选筛选条件的action
      // dispatch(appActions.clearSelectedFilters());
    }
  }}
  getOptionLabel={(option) => option.label}
  defaultValue={filters}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField 
      {...params} 
      label="筛选条件" 
      placeholder="筛选选项" 
      // 可选：添加一键清空按钮，点击后会触发onInputChange传入空值
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <>
            {params.InputProps.endAdornment}
          </>
        ),
      }}
    />
  )}
  sx={{
    '& .MuiOutlinedInput-root': {
      p: 1
    },
    '& .MuiAutocomplete-tag': {
      bgcolor: 'primary.lighter',
      border: '1px solid',
      borderColor: 'primary.light',
      '& .MuiSvgIcon-root': {
        color: 'primary.main',
        '&:hover': {
          color: 'primary.dark'
        }
      }
    }
  }}
/>

核心逻辑说明 #

• 捕捉清空动作：onInputChange会在输入框内容的任何变化时触发（包括手动删字、点击清空按钮），当newInputValue为空字符串时，即可判定输入框已清空，此时执行dispatch更新Store即可。
• 额外处理（可选）：如果需要在清空输入框的同时清空已选中的标签项，可在if (!newInputValue)判断块中添加对应Redux action的dispatch逻辑。
• 一键清空按钮（可选）：配置TextField的InputProps可添加官方清空按钮，用户点击后会自动触发onInputChange并传入空值，无需额外绑定事件。

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