Wie erstelle ich eine dynamische Drop-Down-Liste mit React-Bootstrap

Question

Ich bin völlig neu zu reagieren, damit ich wahrscheinlich etwas elementar vermisse. Der Beispielcode in der react-bootstrap-Site React-Bootstrap zeigt Folgendes. Ich muss die Optionen mit einem Array steuern, aber ich habe Probleme, Beispiele zu finden, die kompiliert werden.

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

Answer 1

Sie können mit diesen beiden Funktionen beginnen. Die erste erstellt dynamisch Ihre Auswahloptionen basierend auf den Requisiten, die an die Seite übergeben wurden. Wenn sie dem Status zugeordnet sind, wird die Auswahl sich selbst neu erstellen.

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 
} 

Dann haben Sie diesen Block Code in Render. Sie übergeben eine Funktionsreferenz an die onChange-Stütze und jedes Mal, wenn onChange aufgerufen wird, wird das ausgewählte Objekt automatisch mit dieser Funktion verbunden. Und anstatt Ihre Optionen manuell zu schreiben, rufen Sie einfach die Funktion createSelectItems() auf, die Ihre Optionen basierend auf einigen Einschränkungen (die sich ändern können) erstellt und zurückgibt.

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

Answer 2

A 1 Liner wäre:

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

Sie speichern die Liste Konstanten in einer separaten Datei Angenommen (und sollten, sofern sie nicht von einem Web-Dienst heruntergeladen sind):

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

Answer 3

Bind dynamischen Drop mit Pfeil-Funktion.

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

Mein Arbeitsbeispiel

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

Sie müssen für die Zuordnung von Schlüssel hinzuzufügen sonst Würfen Warnung es, weil jeder Requisiten eine einzigartige key.Code unten revidiert haben sollte: lassen optionTemplate = this.state.values.map ((v, index) => ({v.name}));