web-dev-qa-db-fra.com

Comment définir une valeur par défaut dans react-select

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?

reactjsdefault-valuereact-select
18
user7334203

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}
  />
);
17
Ved

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
              });
           }}
/>
9
TejasPancholi

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} />
9
Drizzel

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'}.

7
eedrah

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. 

2
Joseph Juhnke

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' 

1
naamadheya

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}
       ...
  />
)}
0
Isaac Pak

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}
                ...
            />
        )
    }
}
0
Dan Meigs