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

最新推荐文章于 2024-07-15 17:50:58 发布

SiO2-A

最新推荐文章于 2024-07-15 17:50:58 发布

阅读量1.1k

点赞数

文章标签：前端 react

本文链接：https://blog.csdn.net/qq_37904407/article/details/134028015

版权

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

摘要由CSDN通过智能技术生成

问题代码

<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 }))}
    />