在antd中,可以使用Select组件来实现选择框多选模式下添加新项目的功能。以下是一个简单的示例代码:
import React, { useState } from 'react';
import { Select, Button, Input } from 'antd';
const { Option } = Select;
const App = () => {
const [selectedItems, setSelectedItems] = useState([]);
const [newItem, setNewItem] = useState('');
const handleChange = (value) => {
setSelectedItems(value);
};
const handleAddItem = () => {
if (newItem) {
setSelectedItems([...selectedItems, newItem]);
setNewItem('');
}
};
return (
setNewItem(e.target.value)}
/>
);
};
export default App;
在上述代码中,我们使用useState来定义两个状态变量selectedItems
和newItem
,分别用于存储已选择的项目和新添加的项目。使用Select组件来展示选择框,并通过mode="multiple"
来设置为多选模式。通过遍历selectedItems
数组,将已选择的项目作为Option渲染到Select组件中。
同时,我们使用Input组件来输入新的项目,并通过onChange
事件监听输入框的变化,将输入的值保存到newItem
状态变量中。
在点击“添加项目”按钮时,我们通过handleAddItem
函数,将newItem
值添加到selectedItems
数组中,并清空输入框的值。
这样,当用户选择已有的项目或输入新的项目时,都可以实现在选择框多选模式下添加新项目的功能。
上一篇:antd选择框的占位符值不显示
下一篇:Antd选择搜索框不渲染匹配项。