Mantine中选中Custom芯片时清除其他芯片选中状态的问题

我在用Mantine的Chip Group组件，给用户提供几个默认选项。选中“Custom”芯片时会打开带输入框的抽屉支持自定义输入，但没法实现选中Custom时取消前四个芯片的选中状态，代码如下：

const Chips = chips.map((chip) => {
  return (
    <Chip
      classNames={classes}
      disabled={opened}
      key={chip.name}
      value={chip.value}
      defaultChecked={opened ? false : chip.defaultValue}
    >
      {chip.name}
    </Chip>
  )
})

return (
  <Chip.Group multiple value={textState} onChange={handleChange} spacing={30}>
    {chips.map((chip) => (
      <Chip
        classNames={classes}
        disabled={opened}
        key={chip.name}
        value={chip.value}
        defaultChecked={opened ? false : chip.defaultValue}
      >
        {chip.name}
      </Chip>
    ))}
    <Chip
      classNames={classes}
      checked={opened}
      onClick={() => {
        setOpen((o) => !o);
        //clear checked value of other chips
      }}
    >
      Custom
    </Chip>
  </Chip.Group>
);

问题根源 #

你用了defaultChecked属性，它仅在组件初始化时生效，后续状态变化不会触发更新；另外Custom芯片的点击逻辑没有和Chip Group的value状态联动，导致无法清空其他芯片的选中状态。

修改方案 #

完全通过textState控制所有芯片的选中状态，替换defaultChecked为受控的checked属性，同时在点击Custom时处理状态清空：

// 先初始化默认选中值（从chips数组里筛选默认选中的项）
const defaultCheckedValues = chips.filter(chip => chip.defaultValue).map(chip => chip.value);
const [textState, setTextState] = useState(defaultCheckedValues);
const [opened, setOpen] = useState(false);

const handleChange = (value) => {
  // 选中普通芯片时自动关闭抽屉
  if (!value.includes('custom')) {
    setOpen(false);
  }
  setTextState(value);
};

return (
  <Chip.Group multiple value={textState} onChange={handleChange} spacing={30}>
    {chips.map((chip) => (
      <Chip
        classNames={classes}
        disabled={opened}
        key={chip.name}
        value={chip.value}
        // 用受控属性绑定选中状态
        checked={textState.includes(chip.value)}
      >
        {chip.name}
      </Chip>
    ))}
    <Chip
      classNames={classes}
      checked={opened}
      onClick={() => {
        setOpen(prevOpen => {
          const newOpen = !prevOpen;
          if (newOpen) {
            // 打开抽屉时清空所有普通芯片的选中状态
            setTextState([]);
          } else {
            // 关闭抽屉时可选恢复默认选中值，不需要就删掉这行
            setTextState(defaultCheckedValues);
          }
          return newOpen;
        });
      }}
      // 给Custom芯片加value，方便Group统一管理（可选）
      value="custom"
    >
      Custom
    </Chip>
  </Chip.Group>
);

关键改动说明 #

• 用checked={textState.includes(chip.value)}替代defaultChecked，让所有普通芯片的选中状态完全由textState控制
• 点击Custom打开抽屉时，调用setTextState([])清空状态，普通芯片会自动取消选中
• 关闭抽屉时可以选择恢复默认选中值，不需要的话删除对应逻辑即可
• 给Custom芯片添加value，能让它也纳入Chip Group的状态管理体系，进一步统一控制逻辑

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