web-dev-qa-db-fra.com

Comment effacer/réinitialiser par programme react-select v2

ReactSelect V2 (Bêta 5) semble avoir plusieurs accessoires comme clearValue, resetValue et setValue. Quoi que j'essaye, je ne peux pas effacer les sélections par programme. resetValue ne semble pas être accessible de l'extérieur.

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

Ceci n'efface pas la sélection en cours.

Est-ce que quelque chose me manque ou est-ce que ce n'est pas encore complètement implémenté?

reactjsreact-select
6
Marc

Si vous utilisez react-select vous pouvez essayer de passer null à value prop.

Par exemple:

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

Voici un exemple de travail de cela.

6
Artur N

Si vous cochez Sélectionner un composant dans le panneau React Developers, vous verrez qu'il est encapsulé par un autre - State Manager. Donc, vous référez en gros au gestionnaire d’État, mais pas à la sélection elle-même. 

 enter image description here

Heureusement, StateManager a un état) et un objet valeur que vous pouvez définir comme bon vous semble.

Par exemple (c'est de mon projet, resetGroup est le gestionnaire onClick que j'attache à un bouton dans DOM):

<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("Введите название")}
      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("Введите название")
    }
0
Vladislav Sorokin

Au cas où cela aiderait quelqu'un, voici ma solution: j'ai créé un bouton pour effacer la valeur sélectionnée en remettant l'état à sa valeur initiale. 

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

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

Exemple de code complet ci-dessous:

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

0
Pixelomo