有没有办法清除radix-ui的select组件上的选定值？

Question

我正在使用 radix-ui 的 select 组件来过滤我的 Reactjs 应用程序上的数据，但我想知道如何在无需刷新页面的情况下清除一个选定的值。

我尝试更改处理以下更改的函数，但它永远不会达到 if 条件。当选项没有改变时，就像组件完全忽略一样：

const handleChangeProject = (value) => {
    if( value === selectedProject){
      console.log("IM HERE")
      setSelectedProject(null);
    }else{
      setSelectedProject(value);
      console.log(value);
      setFilteredDocs(
        docs.filter((doc) =>
          doc?.project.toLowerCase().includes(value.toLowerCase())
        )
      );
    }
  };

这是正在运行的 radix-ui 组件：

<Select value={selectedProject} onValueChange={handleChangeProject}>
   <SelectTrigger className="w-[180px]">
       <SelectValue placeholder="Projects" />
   </SelectTrigger>
   <SelectContent>
       <SelectGroup>
           <SelectLabel>Projects</SelectLabel>
           {projects.map((project) => (
               <SelectItem
                  key={project.project_name}
                  value={project.project_name}
               >
                  {project.project_name}
               </SelectItem>
           ))}
       </SelectGroup>
    </SelectContent>
</Select>

Answer 1

<Select 
    defaultValue={selectedProject}
    value={selectedProject} 
    onValueChange={handleChangeProject}
>

尝试添加defaultValue并将selectedProject设置为它。然后要清除输入，您应该为其设置空字符串。

const [selectedProject, setSelectProject] = useState<undefined | string>(undefined)
const clearSelectandler = () => {
    ...
    setSelectedProject("")
    ...
} 

Answer 2

我找到了答案适用于图书馆的 git 存储库。

[resetKey, setResetKey] = useState<string>()
<Select.Root
  key={key}
>
  {/* rest of select */}
</Select.Root>
const clearSelect = () =>
setKey(new Date().toISOString())