tenho um problema que utiliza o react-select. Utilizo a forma redux e i'tornei o meu componente react-select compatível com a forma redux. Aqui está o código:
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}
/>
);
e aqui como eu o faço:
<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>
Mas o problema é que o meu dropdown não tem um valor por defeito como eu desejo. O que i'estou a fazer mal? Alguma ideia?
Acho que é preciso algo do género:
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}
/>
);
Eu estava a ter um erro semelhante. Certifique-se de que as suas opções têm um atributo de valor.
<option key={index} value={item}> {item} </option>
Em seguida, faz corresponder o valor do elemento seleccionado inicialmente ao valor das opções.
<select
value={this.value} />
Eu próprio passei por isto e optei por definir o valor por defeito na função redutor INIT.
Se ligar a sua selecção com redux então é melhor não 'de-bind' com um valor por defeito seleccionado que não't represente o valor real, em vez disso defina o valor quando inicializa o objecto.