如何以编程方式清除antd选择项目 [英] how to clear antd select items programmatically

问题描述

我正在使用 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选择项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！