antd select 组件使用dropdownRender并设置mode=“multiple“会触发删除的解决方法

最新推荐文章于 2025-05-15 14:38:31 发布

原创最新推荐文章于 2025-05-15 14:38:31 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react

文章讲述了在ReactSelect组件中，如何通过在dropdownRender中阻止默认的删除事件，以防止用户意外删除已选选项。作者提供了修改后的代码片段，展示了添加事件处理函数以阻止键盘删除键的传播。

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

问题代码

<Select
      mode="multiple"
      style={{ width: 300 }}
      placeholder="custom dropdown render"
      dropdownRender={(menu) => (
        <>
          {menu}
          <Divider style={{ margin: "8px 0" }} />
          <Space style={{ padding: "0 8px 4px" }}>
            <Input
              placeholder="Please enter item"
              ref={inputRef}
              value={name}
              onChange={onNameChange}
            />
            <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
              Add item
            </Button>
          </Space>
        </>
      )}
      options={items.map((item) => ({ label: item, value: item }))}
    />

问题原因

输入框按下删除键时会触发Select组件中删除已选择一项的事件，我们只需要在dropdownRender元素里阻止触发删除事件即可

解决代码

<Select
      mode="multiple"
      style={{ width: 300 }}
      placeholder="custom dropdown render"
      dropdownRender={(menu) => (
        <>
          {menu}
          <Divider style={{ margin: "8px 0" }} />
          <Space style={{ padding: "0 8px 4px" }} onKeyDown={(e) => {e.stopPropagation();}}>
            <Input
              placeholder="Please enter item"
              ref={inputRef}
              value={name}
              onChange={onNameChange}
            />
            <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
              Add item
            </Button>
          </Space>
        </>
      )}
      options={items.map((item) => ({ label: item, value: item }))}
    />