个人中心
gpt4 book ai didi

Mantine clear checked value of other chips when one is selected(当选择一个芯片时，Mantine清除其他芯片的检查值)

转载 作者：bug小助手 更新时间：2023-10-25 19:54:54 25 4
gpt4 key购买 nike



I'm using the Mantine chip group component to let users add some default values. When 'Custom' is selected, it opens a drawer with a textbox to allow custom input. (See image below)

我正在使用Marm芯片组组件让用户添加一些缺省值。当选择‘Custom’时，它会打开一个带有文本框的抽屉，以允许自定义输入。(见下图)


Selection of chips for default values with a "Custom" chip at the very end


I can't figure out though how to uncheck the previous four chips when Custom is selected though.

不过，我不知道如何在选择了Custom时取消选中前四个筹码。


Here's my code:

以下是我的代码：


  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>
  );

更多回答

Looks like the first part of your code is never used? const Chips = ...

看起来您的代码的第一部分从未使用过？康斯特奇普斯=..。

优秀答案推荐

I am not exactly sure what are you trying to achieve? If you would like to have an exclusive selection without the option to select multiple of the Chips at the same time, removing the multiple from the <Chip.Group> should do the job.

我不太确定你想要达到什么目的？如果您想要独占选择，而不是同时选择多个芯片，那么从 中删除多个芯片就可以了。


However, if this is not what you are trying to achieve and instead would like to allow the selection of multiple but make the custom chip exclusive you could do it like this:

但是，如果这不是您想要实现的目标，而是希望允许选择多个但使定制芯片独占，则可以这样做：


const [chips, setChips] = useState(...add chips here...)

And your onClick function like this:

您的onClick函数如下所示：


onClick={(event) => {
    setOpen(event.target.checked);
    //clear checked value of other chips
    if(event.target.checked){
        setChips([...chips.map(chip => {chip.value = false; return chip;})])
    }
}}

I hope this helps?

我希望这能帮到你?



If you set the multiple property of the chip group component to multiple={false}, users can only select one chip at a time and remove the previous chip selection.

如果将芯片组组件的Multiple属性设置为Multiple={False}，则用户一次只能选择一个芯片，并删除以前的芯片选择。


更多回答

25 4 0
文章推荐： undefined reference to curl_global_init, curl_easy_init and other function(C)(未定义对curl_global_init、curl_asy_init和其他函数(C)的引用)
文章推荐： Can't stage new project in Eclipse git(无法在Eclipse Git中暂存新项目)
文章推荐： Convert string to C# Conditional operator [closed](将字符串转换为C#条件运算符[Closed])
文章推荐： I want to know CSS vs inline style(我想知道css和内联风格的对比)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com