Come faccio a creare un elenco a discesa dinamico con react-bootstrap

Question

Sono completamente nuovo a reagire quindi probabilmente mancherò qualcosa di elementale. Il codice di esempio nel sito react-bootstrap React-Bootstrap mostra quanto segue. Ho bisogno di guidare le opzioni usando un array, ma ho difficoltà a trovare degli esempi che verranno compilati.

<Input type="select" label="Multiple Select" multiple> 
    <option value="select">select (multiple)</option> 
    <option value="other">...</option> 
</Input> 

Answer 1

È possibile iniziare con queste due funzioni. Il primo creerà le opzioni di selezione in modo dinamico in base agli oggetti di scena passati alla pagina. Se sono mappati allo stato, la selezione si ricrea automaticamente.

createSelectItems() { 
    let items = [];   
    for (let i = 0; i <= this.props.maxValue; i++) {    
      items.push(<option key={i} value={i}>{i}</option>); 
      //here I will be creating my options dynamically based on 
      //what props are currently passed to the parent component 
    } 
    return items; 
} 

onDropdownSelected(e) { 
    console.log("THE VAL", e.target.value); 
    //here you will see the current selected value of the select input 
} 

Quindi si avrà questo blocco di codice all'interno del rendering. Passerai un riferimento alla funzione sul puntello onChange e ogni volta che onChange viene chiamato l'oggetto selezionato si legherà automaticamente con quella funzione. E invece di scrivere manualmente le tue opzioni chiamerai semplicemente la funzione createSelectItems() che costruirà e restituirà le tue opzioni in base ad alcuni vincoli (che possono cambiare).

<Input type="select" onChange={this.onDropdownSelected} label="Multiple Select" multiple> 
     {this.createSelectItems()} 
    </Input> 

Answer 2

A 1 fodera sarebbe:

import * as YourTypes from 'Constants/YourTypes'; 
.... 
<Input ...> 
    {Object.keys(YourTypes).map((t,i) => <option key={i} value={t}>{t}</option>)} 
</Input> 

Supponendo di memorizzare le costanti di elenco in un file separato (e si dovrebbe, a meno che siano scaricati da un servizio Web):

# YourTypes.js 
export const MY_TYPE_1="My Type 1" 
.... 

Answer 3

associare il calo dinamico utilizzando la funzione freccia.

class BindDropDown extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     values: [ 
 
     { name: 'One', id: 1 }, 
 
     { name: 'Two', id: 2 }, 
 
     { name: 'Three', id: 3 }, 
 
     { name: 'four', id: 4 } 
 
     ] 
 
    }; 
 
    } 
 
    render() { 
 
    let optionTemplate = this.state.values.map(v => (
 
     <option value={v.id}>{v.name}</option> 
 
    )); 
 

 
    return (
 
     <label> 
 
     Pick your favorite Number: 
 
     <select value={this.state.value} onChange={this.handleChange}> 
 
      {optionTemplate} 
 
     </select> 
 
     </label> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <BindDropDown />, 
 
    document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

Answer 4

Il mio esempio di lavoro

this.countryData = [ 
    { value: 'USA', name: 'USA' }, 
    { value: 'CANADA', name: 'CANADA' }    
]; 

<select name="country" value={this.state.data.country}> 
    {this.countryData.map((e, key) => { 
     return <option key={key} value={e.value}>{e.name}</option>; 
    })} 
</select> 

Answer 5

è necessario aggiungere chiave per la mappatura altrimenti tiri di avvertimento perché ogni puntelli dovrebbero avere un key.Code unica rivista di seguito: cerchiamo optionTemplate = this.state.values.map ((v, index) => ({v.name}));