j'ai un problème avec react-select. J'utilise la forme redux et j'ai rendu mon composant réag-select compatible avec la forme redux. Voici le code:
const MySelect = props => (
<Select
{...props}
value={props.input.value}
onChange={value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
placeholder={props.placeholder}
selectedValue={props.selectedValue}
/>
);
et voici comment je le rends:
<div className="select-box__container">
<Field
id="side"
name="side"
component={SelectInput}
options={sideOptions}
clearable={false}
placeholder="Select Side"
selectedValue={label: 'Any', value: 'Any'}
/>
</div>
Mais le problème est que ma liste déroulante n'a pas de valeur par défaut, comme je le souhaite. Qu'est-ce que je fais mal? Des idées?
Je suppose que vous avez besoin de quelque chose comme ça:
const MySelect = props => (
<Select
{...props}
value={props.options.filter(option => option.label === 'Some label')}
onChange={value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
placeholder={props.placeholder}
/>
);
J'ai utilisé le paramètre defaultValue. Le code ci-dessous indique comment j'ai obtenu une valeur par défaut et mettre à jour la valeur par défaut lorsqu'une option est sélectionnée dans le menu déroulant.
<Select
name="form-dept-select"
options={depts}
defaultValue={{ label: "Select Dept", value: 0 }}
onChange={e => {
this.setState({
department: e.label,
deptId: e.value
});
}}
/>
J'avais une erreur similaire. Assurez-vous que vos options ont un attribut value.
<option key={index} value={item}> {item} </option>
Faites ensuite correspondre la valeur de l'élément selects à la valeur des options.
<select
value={this.value} />
Si vous êtes venu ici pour react-select v2 et que vous rencontrez toujours des problèmes, la version 2 n'accepte désormais plus qu'un objet sous la forme value
, defaultValue
, etc.
Autrement dit, essayez d'utiliser value={{value: 'one', label: 'One'}}
au lieu de value={'one'}
.
Je me suis contenté de le faire moi-même et j'ai choisi de définir la valeur par défaut à la fonction de réduction INIT.
Si vous liez votre sélection à redux, il est préférable de ne pas la lier avec une valeur de sélection par défaut qui ne représente pas la valeur réelle, mais définissez la valeur lorsque vous initialisez l'objet.
Si vos options sont comme ça
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
Votre {props.input.value}
doit correspondre à l'un des 'value'
de votre {props.options}
Signification, props.input.value
devrait être soit 'one'
ou 'two'
Si vous n'utilisez pas redux-form et que vous utilisez l'état local pour les modifications, votre composant react-select peut ressembler à ceci:
class MySelect extends Component {
constructor() {
super()
}
state = {
selectedValue: 'default' // your default value goes here
}
render() {
<Select
...
value={this.state.selectedValue}
...
/>
)}
En étendant la réponse de @ isaac-pak, si vous souhaitez transmettre la valeur par défaut à votre composant dans une propriété, vous pouvez l'enregistrer dans l'état dans la méthode de cycle de vie composantDidMount () pour garantir que la valeur par défaut est sélectionnée pour la première fois.
export default class MySelect extends Component {
constructor(props) {
super(props);
this.state = {
selectedValue: null,
};
this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
this.setState({
selectedValue: this.props.defaultValue,
})
}
handleChange(selectedValue) {
this.setState({selectedValue});
}
render() {
return (
<Select
...
value={this.state.selectedValue}
onChange={this.handleChange}
...
/>
)
}
}