Come impostare un valore predefinito in react-select

Ho un problema con l'utilizzo di react-select. Io uso redux form e ho reso il mio componente reatt-select compatibile con redux form. Ecco il codice:

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 qui come lo rendo:

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

Ma il problema è che il mio menu a discesa non ha un valore predefinito come desidero. Cosa sto sbagliando? Qualche idea?

Immagino che tu abbia bisogno di qualcosa del genere:

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

Ho usato il parametro defaultValue, di seguito è riportato il codice in cui ho ottenuto un valore predefinito e aggiorna il valore predefinito quando viene selezionata un'opzione dal menu a discesa.

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

Se sei venuto qui per reagire-select v2, e ancora problemi - versione 2 ora accetta solo un oggetto come value, defaultValue, etc.

Cioè, prova a usare value={{value: 'one', label: 'One'}}, invece di solo value={'one'}.

Ho riscontrato un errore simile. Assicurati che le tue opzioni abbiano un attributo di valore.

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

Quindi abbina inizialmente il valore dell'elemento selects al valore delle opzioni.

<select 
    value={this.value} />

Estendendo la risposta di @ isaac-pak, se vuoi passare il valore predefinito al tuo componente in un puntello, puoi salvarlo nello stato nel metodo del ciclo di vita componentDidMount () per assicurarti che il valore predefinito sia selezionato la prima volta.

Nota, ho aggiornato il codice seguente per renderlo più completo e per utilizzare una stringa vuota come valore iniziale per il commento.

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.target.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

Ho appena fatto questo da solo e ho scelto di impostare il valore predefinito nella funzione INIT del riduttore.

Se vincoli la tua selezione con redux, allora meglio non "de-legarla" con un valore predefinito di selezione che non rappresenta il valore effettivo, invece imposta il valore quando inizializzi l'oggetto.

Se non stai usando redux-form e stai usando lo stato locale per le modifiche, il tuo componente di selezione-reazione potrebbe assomigliare a questo:

class MySelect extends Component {

constructor() {
    super()
}

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

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

Usa gli oggetti di scena defaultInputValue in questo modo:

<Select
   name="name"
   isClearable
   onChange={handleChanges}
   options={colourOptions}
   isSearchable="true"
   placeholder="Brand Name"
   defaultInputValue="defaultInputValue"
/>

          

per ulteriori riferimenti https://www.npmjs.com/package/react-select

Se le tue opzioni sono come questa

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

Il tuo {props.input.value}deve corrispondere uno dei 'value'nella vostra{props.options}

Significato, props.input.valuedovrebbe essere 'one'o'two'

Per selezionare automaticamente il valore di in selezionare.

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

Utilizza l'attributo value nel tag select

value={this.state.contactmethod || ''}

la soluzione sta funzionando per me.

1. Crea una proprietà di stato per il testo dell'opzione predefinita nel costruttore
   • Non preoccuparti del valore dell'opzione predefinita
2. Aggiungi un tag di opzione alla funzione di rendering. Mostra solo usando espressioni di stato e ternarie
3. Crea una funzione per gestire quando un'opzione è stata selezionata

4. Modificare lo stato del valore dell'opzione predefinita in questa funzione del gestore eventi su null

   Class MySelect extends React.Component
   {
       constructor()
       {
           super()
           this.handleChange = this.handleChange.bind(this);
           this.state = {
               selectDefault: "Select An Option"
           }
       }
       handleChange(event)
       {
           const selectedValue = event.target.value;
           //do something with selectedValue
           this.setState({
               selectDefault: null
           });
       }
       render()
       {
           return (
           <select name="selectInput" id="selectInput" onChange={this.handleChange} value= 
               {this.selectedValue}>
            {this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
               {'map list or static list of options here'}
           </select>
           )
       }
   }
   

Uso spesso qualcosa di simile.

Valore predefinito da props in questo esempio

if(Defaultvalue ===item.value) {
    return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>   
} else {
    return <option key={item.key} value={item.value}>{plantel.value} </option> 
}

È necessario eseguire una ricerca approfondita se si utilizzano i gruppi nelle opzioni:

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}

const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};