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

问题描述：

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

如何以编程方式从中删除所选项目?
注意: 不是字符串值，而是一个节点.

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

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

相关推荐