[英]Antd Multi Select Clear Button
下面是来自 antd 网站的关于创建多 select 选项的基本代码。 我想要实现的是创建一个“清除”按钮。 单击清除时,它将删除所有带有“x”的框,例如 a10、b12 等。如何清除框?
我不想使用allowClear,我想把它绑定到我自己的按钮上
https://codesandbox.io/s/g0dec
const { Select } = antd;
const { Option } = Select;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
>
{children}
</Select>,
mountNode,
);
您可以通过制作Select
受控组件来做到这一点。 这就是你可以通过使用Select
和useState
钩子的value
属性来做到这一点的方法。
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";
const { Option } = Select;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
const App = () => {
const defaultValues = ["a10", "c12"];
const [selectedValues, setSelectedValues] = useState(defaultValues);
function handleChange(value) {
console.log(`selected ${value}`);
setSelectedValues(value);
}
const handleClear = () => {
setSelectedValues([]);
};
return (
<div>
<Select
mode="multiple"
style={{ width: "100%" }}
placeholder="Please select"
defaultValue={selectedValues}
onChange={handleChange}
value={selectedValues}
>
{children}
</Select>
<span>
<button onClick={handleClear}>Clear</button>
</span>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("container"));
您可以像这样添加allowClear
道具:
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
allowClear
>
{children}
</Select>
当你 hover 时,它会在输入的右侧显示一个清除按钮。
您可以在 Select 输入的antd 文档中找到它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.