如何以编程方式清除antd选择项目

Question

我正在使用https://ant.design/components/select/

如何以编程方式从中删除所选项目<Select>？
注意：<Option>不是字符串值，而是Node。

Answer 1

如果您正在使用 React Hooks，请使用以下内容：

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>
    </>
  )
}

Answer 2

只需将值设置为空。例如

<Select value={null} />