antd select 有value时使用allowclear清空失效

原创于 2023-11-07 15:45:42 发布 · 702 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #antd #组件 #react

antd 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在使用ReactSelect组件时，在onChange事件中，当用户选择的值为空时，通过useStateHook手动将value属性置空。代码示例展示了如何操作Select组件并处理空值的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在onchange事件里，将select的value手动置空即可~

const [typeName, setTypeName] = useState('')
 <Select
            placeholder="项目类型"
            suffixIcon={<Icon className="selectIcon" type="icon-zhankai1" />}
            value={typeName}
            allowClear
            onChange={(val) => {
              if (isEmpty(val)) {
                setTypeName(); // 在这里置空
              }
              handleProjectTypeSelect(val);
            }}
          >
            {typeList.map((item) => (
              <Option key={item.id} value={item.id}>
                {item.value}
              </Option>
            ))}
          </Select>