如何以编程方式清除/重置react-select v2？

Question

ReactSelect V2(测试版5)似乎有几个道具一样clearValue,resetValue和setValue.无论我在尝试什么,我都无法以编程方式清除选择.resetValue似乎无法从外部访问.

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

这并不能清除当前的选择.

我在这里想念一下,还是没有完全实现？

Answer 1

您可以使用 ref 清除 react select 的值。

import React, { useRef } from "react";
import Select from "react-select";

export default function App() {
  const selectInputRef = useRef();

  const onClear = () => {
    selectInputRef.current.select.clearValue();
  };

  return (
    <div className="App">
      <h1>Select Gender</h1>
      <Select
        ref={selectInputRef}
        options={[
          { value: "male", label: "Male" },
          { value: "female", label: "Female" }
        ]}
      />
      <button onClick={onClear}>Clear Value</button>
    </div>
  );
}

这是 CodeSandbox链接

Answer 2

如果您正在使用react-select,您可以尝试传递null给value道具.

例如:

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

这是一个有效的例子.

Answer 3

我本人遇到了此问题，并通过将a传递key给React-Select组件并附加了所选值来解决了这个问题。然后，ReactSelect当选择内容更新时，这将强制自身重新呈现。

我希望这可以帮助别人。

import ReactSelect from 'react-select';

...

<ReactSelect
  key={`my_unique_select_key__${selected}`}
  value={selected || ''}
  ...
/>

Answer 4

只需将值存储在状态中，然后使用 componentDidUpdate 等以编程方式更改状态...

class Example extends Component {

constructor() {
    super()
}

state = {
     value: {label: 'Default value', key : '001'}
}

render() {
   return(
      <Select
         ...
         value={this.state.value}
         ...
      />
   )
)}

注意：'value' 应该是一个对象。

Answer 5

沿着最上面的答案，请注意该值需要为“null”而不是“未定义”才能正确清除。

Answer 6

一个简单的选择是传递null给value道具。

<Select value={null} />

Answer 7

这是我使用Hooks 以编程方式清除的React-Select V3 的 工作实现。

您可以在CodeSandbox DEMO 中使用它。欢迎任何反馈。

const initialFormState = { mySelectKey: null };

const [myForm, setMyForm] = useState(initialFormState);

const updateForm = value => {
  setMyForm({ ...myForm, mySelectKey: value });
};

const resetForm = () => {
  setMyForm(initialFormState);
};

return (
  <div className="App">
    <form>

      <Select name = "mySelect"
           options = {options}
             value = {options.filter(({ value }) => value === myForm.mySelectKey)}
    getOptionLabel = {({ label }) => label}
    getOptionValue = {({ value }) => value}
          onChange = {({ value }) => updateForm(value)} />

      <p>MyForm: {JSON.stringify(myForm)}</p>

      <input type="button" value="Reset fields" onClick={resetForm} />

    </form>
  </div>
);

Answer 8

如果有人正在寻找使用 Hooks 的解决方案。反应选择V3.05：

const initial_state = { my_field: "" }

const my_field_options = [
    { value: 1, label: "Daily" },
    { value: 2, label: "Weekly" },
    { value: 3, label: "Monthly" },
]

export default function Example(){
    const [values, setValues] = useState(initial_state);

    function handleSelectChange(newValue, actionMeta){
        setValues({
            ...values,
            [actionMeta.name]: newValue ? newValue.value : ""
        })
    }

    return <Select
               name={"my_field"}
               inputId={"my_field"}
               onChange={handleSelectChange}
               options={my_field_options}
               placeholder={values.my_field}
               isClearable={true}
           /> 
}

Answer 9

在 v5 中，您实际上可以传递 propisClearable={true}使其可清除，这可以轻松重置所选值