プログラムでReact-Selectをクリア/リセットする方法は？

ReactSelect V2とV3は、のようないくつかの小道具を持っているようだclearValue、resetValueとsetValue。何をしようとしても、プログラムで選択をクリアすることはできません。resetValue外部からはアクセスできないようです。

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

これは現在の選択をクリアしません。

ここで何かが足りないのですか、それともまだ完全に実装されていませんか？

私は自分でこの問題に遭遇keyし、選択した値を追加してReact-Selectコンポーネントに渡すことで問題を修正することができました。これによりReactSelect、選択が更新されたときに、が自動的に再レン​​ダリングされます。

これが誰かに役立つことを願っています。

import ReactSelect from 'react-select';

...

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

使用している場合 https://github.com/JedWatson/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"));

https://codesandbox.io/s/8256j5m3vl この実用的な例。

値を状態に保存し、componentDidUpdateなどを使用してプログラムで状態を変更するだけです...

class Example extends Component {

constructor() {
    super()
}

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

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

注：「値」はオブジェクトである必要があります。

簡単なオプションはnull、value小道具に渡すことです。

<Select value={null} />

これは私の実用的な実装です https://github.com/JedWatson/react-select プログラムでクリアhttps://reactjs.org/docs/hooks-intro.html。

あなたはそれで遊ぶことができます https://codesandbox.io/embed/react-select-v3-with-hooks-and-form-k0z5d。フィードバックは大歓迎です。

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

誰かがフックを使用して解決策を探している場合。React-Select 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}
           /> 
}

React DevelopersパネルでSelectコンポーネントをチェックすると、別のStateManagerによってラップされていることがわかります。したがって、参照は基本的に状態マネージャーへの参照ですが、それ自体を選択するためではありません。

幸いなことに、StateManagerにはstate）と、必要に応じて設定できる値オブジェクトがあります。

たとえば（これは私のプロジェクトからのもので、resetGroupはDOMのボタンにアタッチするonClickハンドラーです）：

<Select onChange={this.handleGroupSelect} 
      options={this.state.groupsName.map(group => 
                  ({ label: group, value: group }) )}
      instanceId="groupselect"
      className='group-select-container'
      classNamePrefix="select"
      placeholder={this.context.t("Enter name")}
      ref={c => (this.groupSelect = c)}
/>

    resetGroup = (e) => {
        e.preventDefault()
        this.setState({
            selectedGroupName: ""
        })
        this.groupSelect.state.value.value = ""
        this.groupSelect.state.value.label = this.context.t("Enter name")
    }

関数コンポーネントを使用している人のために、変更/トリガー/ reduxValueに基づいてreactselectをリセットする方法の基本的なデモを次に示します。

import React, { useState, useEffect } from 'react';
import Select from 'react-select';

const customReactSelect = ({ options }) => {
  const [selectedValue, setSelectedValue] = useState([]);


  /**
   * Based on Some conditions you can reset your value
   */
  useEffect(() => {
      setSelectedValue([])
  }, [someReduxStateVariable]);

  const handleChange = (selectedVal) => {
    setSelectedValue(selectedVal);
  };

  return (
    <Select value={selectedValue} onChange={handleChange} options={options} />
  );
};

export default customReactSelect;

refを使用してreactselectの値をクリアできます。

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です https://codesandbox.io/s/react-select-clear-input-jm1xl?file=/src/App.js:0-533

誰かに役立つ場合は、これが私の解決策です。状態を初期値に戻すことで、選択した値をクリアするボタンを作成しました。

<button onClick={() => this.clearFilters()} >Clear</button>

clearFilters(){
    this.setState({ startTime: null })
}

以下の完全なコードサンプル：

import React from "react"
import Select from 'react-select';

const timeSlots = [
    { value: '8:00', label: '8:00' },
    { value: '9:00', label: '9:00' },
    { value: '10:00', label: '10:00' },
] 

class Filter extends React.Component {

  constructor(){
    super();
    this.state = {
      startTime: null,
    }
  }
  
  startTime = (selectedTime) => {
    this.setState({ startTime: selectedTime });
  }

  clearFilters(){
    this.setState({
        startTime: null, 
    })
  }

  render(){
    const { startTime } = this.state;
    
    return(
      <div>
        <button onClick={() => this.clearFilters()} >Clear</button>
        <Select
            value={startTime}
            onChange={this.startTime}
            options={timeSlots}
            placeholder='Start time'
        />
      </div>
    )
  }

}

export default Filter