how to clear antd select items programmatically

问题

I'm using 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.

回答1:

Just set value to null. e.g.

<Select value={null} />

回答2:

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

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/47415280/how-to-clear-antd-select-items-programmatically