Tengo un problema al usar reaccionar-seleccionar. Uso el formulario redux y he hecho que mi componente react-select sea compatible con el formulario redux. Aquí está el 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} /> );y aquí como lo renderizo:
<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>Pero el problema es que mi menú desplegable no tiene un valor predeterminado como deseo. ¿Qué estoy haciendo mal? ¿Algunas ideas?
Supongo que necesitas algo como esto:
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} /> );Utilicé el parámetro defaultValue, a continuación se muestra el código de cómo logré un valor predeterminado y cómo actualicé el valor predeterminado cuando se selecciona una opción del menú desplegable.
<Select name="form-dept-select" options={depts} defaultValue={{ label: "Select Dept", value: 0 }} onChange={e => { this.setState({ department: e.label, deptId: e.value }); }} />Si ha venido aquí para reaccionar-seleccione v2 y aún tiene problemas, la versión 2 ahora solo acepta un objeto como value , valor defaultValue , etc.
Es decir, intenta usar value={{value: 'one', label: 'One'}} , en lugar de solo value={'one'} .