React中输入TextField时清除多选Select组件的Chip选中内容

你的代码核心问题在于handleChangeTextField里的状态更新逻辑错误，修正后的完整代码如下：

const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
];

function getStyles(name, personName, theme) {
  return {
    fontWeight:
      personName.indexOf(name) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium,
  };
}

// 补充MenuProps定义避免报错
const MenuProps = {
  PaperProps: {
    sx: {
      maxHeight: 480,
      width: 250,
    },
  },
};

export default function MultipleSelectChip() {
  const theme = useTheme();
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setPersonName(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : value
    );
  };

  // 修改此处：将null改为空数组，匹配Select组件的value类型要求
  const handleChangeTextField = (event) => {
    setPersonName([]);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
        <Select
          labelId="demo-multiple-chip-label"
          id="demo-multiple-chip"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
          renderValue={(selected) => (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              {selected.map((value) => (
                <Chip key={value} label={value} />
              ))}
            </Box>
          )}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, personName, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
        <TextField 
          variant="outlined"
          label="Type anything to remove the value of Chip"
          onChange={handleChangeTextField} 
        />
      </FormControl>
    </div>
  );
}

关键修改说明 #

• 把handleChangeTextField里的setPersonName(null)改成setPersonName([])：多选模式下的Select组件，value属性要求是数组类型，设置为null会导致组件状态异常，空数组才能正确清空所有选中的Chip
• 补充了MenuProps的基础定义：避免原代码中未定义该变量导致的运行报错，你可以根据需求调整它的样式

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