antd select 组件 使用dropdownRender并设置mode=“multiple“会触发删除的解决方法
问题代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <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元素里阻止触发删除事件即可
解决代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <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 }))}
/>
|
