reactjs - props - react select set selected option

Cómo establecer un valor predeterminado en reaccionar-seleccionar

Question

Tengo un problema con reaccion-select 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í cómo lo hago:

<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?

Answer 1

Acabo de pasar por esto y elegí establecer el valor predeterminado en la función INIT del reductor.

Si vincula su selección con redux, es mejor que no la "elimine" con un valor predeterminado de selección que no represente el valor real, sino que establezca el valor cuando inicialice el objeto.

Answer 2

Estaba teniendo un error similar. Asegúrese de que sus opciones tienen un atributo de valor.

<option key={index} value={item}> {item} </option>

Luego haga coincidir el valor del elemento seleccionado inicialmente con el valor de las opciones.

<select 
    value={this.value} />

Answer 3

Extendiendo la respuesta de @ isaac-pak, si desea pasar el valor predeterminado a su componente en un prop, puede guardarlo en el estado en el método de ciclo de vida componentDidMount () para asegurarse de que se seleccione la opción predeterminada la primera vez.

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

Answer 4

Si ha venido aquí para reaccionar-seleccionar v2, y aún tiene problemas, la versión 2 ahora solo acepta un objeto como value , value defaultValue , etc.

Es decir, intente usar value={{value: ''one'', label: ''One''}} , en lugar de solo value={''one''} .

Answer 5

Si no está utilizando redux-form y está utilizando el estado local para los cambios, su componente react-select podría tener este aspecto:

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: ''default'' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}

Answer 6

Si tus opciones son así

var options = [
  { value: ''one'', label: ''One'' },
  { value: ''two'', label: ''Two'' }
];

Su {props.input.value} debe coincidir con uno de los ''value'' en su {props.options}

Es decir, props.input.value debe ser ''one'' o ''two''

Answer 7

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

Answer 8

Usé el parámetro DefaultValue, a continuación se muestra el código de cómo alcancé un valor predeterminado y también actualicé el valor predeterminado cuando se selecciona una opción en el 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
              });
           }}
/>