本文介绍了如何以编程方式清除antd选择项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 https://ant.design/components/select/
如何以编程方式从<Select>
中删除所选项目?
注意:<Option>
不是字符串值,而是节点.
How can I programmatically remove the selected items from <Select>
?
Note: the <Option>
is not a string value, but a Node.
推荐答案
如果您使用的是React Hooks,请使用以下命令:
If you are using React Hooks, use the following:
import React, { useState } from 'react'
import { Button, Select } from 'antd'
const { Option } = Select
// inside your component
const ComponentName = () => {
const [selected, setSelected] = useState()
// handler
const clearSelected = () => {
// this line will clear the select
// when you click on the button
setSelected(null)
}
// in the return value
return (
<>
// ...
// In the select element
<Select style={{ width: 150 }} onChange={value => setSelected(value)}
value={selected}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</Select>
<Button onClick={clearSelected}>Clear Selected</Button>
</>
)
}
这篇关于如何以编程方式清除antd选择项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!