javascript - 如何以编程方式清除/重置 React-Select？

Question

ReactSelect V2和V3似乎有几个道具，比如clearValue,resetValue和setValue. 无论我在尝试什么，我都无法以编程方式清除选择。resetValue似乎无法从外部访问。

selectRef.setValue([], 'clear')
// or
selectRef.clearValue()

这不会清除当前选择。

我在这里错过了什么还是它还没有完全实现？

标签： javascriptreactjsreact-hooksreact-select

Answer 1

如果您使用的是react-select，您可以尝试传递null给valueprop。

例如：

import React from "react";
import { render } from "react-dom";
import Select from "react-select";

class App extends React.Component {
  constructor(props) {
    super(props);

    const options = [
      { value: "one", label: "One" },
      { value: "two", label: "Two" }
    ];

    this.state = {
      select: {
        value: options[0], // "One" as initial value for react-select
        options // all available options
      }
    };
  }

  setValue = value => {
    this.setState(prevState => ({
      select: {
        ...prevState.select,
        value
      }
    }));
  };

  handleChange = value => {
    this.setValue(value);
  };

  handleClick = () => {
    this.setValue(null); // here we reset value
  };

  render() {
    const { select } = this.state;

    return (
      <div>
        <p>
          <button type="button" onClick={this.handleClick}>
            Reset value
          </button>
        </p>
        <Select
          name="form-field-name"
          value={select.value}
          onChange={this.handleChange}
          options={select.options}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

这是一个工作示例。