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é?
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.
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.
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("Введите название")
}
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