how to clear and select items programmatically

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

Just set value to null. e.g.

<Select value={null} />

Try this

    class Banana extends React.Component {
          constructor() {
            super();
            this.state = {
        selected: []
};

            this.handleChange = this.handleChange.bind(this);
            this.clearSelected = this.clearSelected.bind(this);
          }

          handleChange(value) {
            this.setState({ selected: value });
          }

          clearSelected() {
            this.setState({ selected: []});
          }

          render() {
            return (
              <div>
                <Select value={this.state.selected} style={{ width: 120 }} onChange={this.handleChange} placeholder="Select option">
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="disabled" disabled>Disabled</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <Button onClick={this.clearSelected}>clear selected</Button>
              </div>
            );
          }
        }

Assigning the value of Select to state should work. Try something like this:

class Banana extends React.Component {
  constructor() {
    super();
    this.state = {};

    this.handleChange = this.handleChange.bind(this);
    this.clearSelected = this.clearSelected.bind(this);
  }

  handleChange(value) {
    this.setState({ selected: value });
  }

  clearSelected() {
    this.setState({ selected: null });
  }

  render() {
    return (
      <div>
        <Select value={this.state.selected} style={{ width: 120 }} onChange={this.handleChange}>
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="disabled" disabled>Disabled</Option>
          <Option value="Yiminghe">yiminghe</Option>
        </Select>
        <Button onClick={this.clearSelected}>clear selected</Button>
      </div>
    );
  }
}

https://codepen.io/anon/pen/NwYdEx?editors=0010

Use undefined for the placeholder text to appear. It will not appear with null.

In this case, when selectValue variable is set to 0, null, undefined, false, the Select value is clearead.

      <Select onChange={e => setSelected(e)} 
        value={selectValue || undefined}>
        <Option value="1">Apple</Option>
        <Option value="2">Orange</Option>
      </Select>

Without using State. Code was taken from the library itself (_this.onClearSelection in Select.js).

class MySelection extends React.Component {
      constructor() {
        this.handleChange = this.handleChange.bind(this);
        this.clearSelected = this.clearSelection.bind(this);
      }

      handleChange(value) {
        this.setState({ selected: value });
      }

      clearSelection() {
        const _this = this.refs.mySelection.rcSelect;
        const props = _this.props;
        const state = _this.state;

        if (props.disabled) {
          return;
        }

        let inputValue = state.inputValue;
        let value = state.value;

        if (inputValue || value.length) {
          if (value.length) {
            _this.fireChange([]);
          }

          _this.setOpenState(false, {
            needFocus: true
          });

          if (inputValue) {
            _this.setInputValue("");
          }
        }
      }

      render() {
        return (
          <div>
            <Select ref="mySelection" onChange={this.handleChange} placeholder="Select option">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
            <Button onClick={this.clearSelection}>clear selected</Button>
          </div>
        );
      }
    }

In antd, In Class Component, Using Ref, Clear or reset select list value or form item value

https://stackoverflow.com/a/64077769/11844605

The question is about antd. All the answers below are normal react way to clear select.

But antd is much powerful and offers useForm ref which can be used to clear form values.

You need to wrap your select within Form.Item and give it a name.

import React, { useState } from 'react'
import { Button, Select } from 'antd'

const { Option } = Select

const ComponentName = () => {

  // using this for the form reference
  const [form] = Form.useForm();

  // handler
  const clearSelected = () => {
  // mySelect is the Form.Item name select below in the html  
    form.setFieldValue('mySelect', undefined);
  }

  const onFinish = (values) => {
    console.log(values)
  }

  // in the return value
  return (
    <>
      <Form form={form} initialValues={{mySelect: 'jack'}} onFinish={onFinish}>
        <Form.Item name="mySelect">
          <Select>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
          </Select>
        </Form.Item>

        <Button onClick={clearSelected}>Clear Selected</Button>

        <Form.Item>
          <Button htmlType="submit" type="primary" loading={loading}>
             Submit
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}

Also with antd, you don't need to hold any state variables for holding the form values. Just wrap all antd Components within Form.Item and give a name. When the form is submitted, you'll get all the name-value pairs in the onFinish callback.