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

【问题标题】：how to clear and select items programmatically如何以编程方式清除和选择项目
【发布时间】：2017-11-21 14:16:02
【问题描述】：

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

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

【问题讨论】：

请提供一些你尝试过的东西
我正在尝试绑定像

【解决方案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>
    </>
  )
}

【讨论】：

Overload 1 of 2, '(props: Readonly>): Select'，给出了以下错误。类型 'null' 不能分配给类型 'string |号码 |反应文本[] |标签值 |标签值[] |未定义'。
也将其设置为 undefined 而不是 null 也不起作用

【解决方案2】：

只需将 value 设置为 null。例如

<Select value={null} />

【讨论】：

如何访问

【解决方案3】：

试试这个

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

【讨论】：

谢谢！用这种方式保持placeholder prop.

【解决方案4】：

将 Select 的值分配给 state 应该可以工作。试试这样的：

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

【讨论】：

谢谢，马克斯。我正在使用类似的代码，但有一些区别： 1.

【解决方案5】：

使用 undefined 来显示占位符文本。它不会以 null 出现。

在这种情况下，当selectValue变量设置为0、null、undefined、false时，Select值是clearead。


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

【讨论】：

【解决方案6】：

不使用状态。代码取自库本身（_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>
        );
      }
    }

【讨论】：

【解决方案7】：

在antd中，在类组件中，使用Ref，清除或重置选择列表值或表单项值

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

【讨论】：