Dynamic React Wählen Sie Menü Komponente

Question

Ich bin "neu-ish" zu reagieren. Ich versuche, eine benutzerdefinierte Komponente zu erstellen, die eine Liste von Elementen in einem Auswahlmenü anzeigt. Der Benutzer kann eine Option aus dem Menü auswählen. Nach dem Abschluss befindet sich darunter eine Schaltfläche "Hinzufügen". Wenn Sie darauf klicken, wird ein weiteres Auswahlmenü angezeigt, das mit den verbleibenden, nicht ausgewählten Optionen des ersten Auswahlmenüs gefüllt wird. Dies würde idealerweise mit jedem weiteren Klick auf den Button Hinzufügen so lange weitergehen, bis nur noch eine Option übrig ist.

Ich habe den folgenden Code erstellt, der das anfängliche Auswahlmenü anzeigt, aber ich habe Probleme, meinen Kopf darum zu wickeln, wohin ich damit gehen soll.

import React from 'react'; 
import { Grid, Row, Col, Button, FormGroup, ControlLabel, FormControl } from 'react-bootstrap'; 

class App extends React.Component { 
    constructor(props) { 
     super(props); 

     this.props = props; 
     this.state = { 
      fruits: [ 
       { selected: false, fruit: 'Banana', value: 'banana' }, 
       { selected: false, fruit: 'Apple', value: 'apple' }, 
       { selected: false, fruit: 'Orange', value: 'orange' } 
      ] 
     }; 

     this._handleClick = this._handleClick.bind(this); 
    } 

    _handleClick(event) { 
    } 

    _handleChange(option) { 
     // this.setState({ value: option, selected: true }); 
    } 

    render() { 
     return (
      <div> 
       <Grid> 
        <Row> 
         <SelectMenu data={this.state.fruits} onChange={this._handleChange.bind(this)} /> 
        </Row> 
        <Row> 
         <Col xs={12}> 
          <p> 
           <Button href="#" onClick={this._handleClick}>Add</Button> 
          </p> 
         </Col> 
        </Row> 
       </Grid> 
      </div> 
     ); 
    } 
} 

class SelectMenu extends React.Component<any, any> { 
    constructor(props) { 
     super(props); 

     this.state = { 
      value: undefined 
     }; 
    } 

    _handleChange(event) { 
     this.props.onChange(event.target.value); 
    } 

    render() { 
     const unselected = this.props.data.filter(fruit => fruit.selected == false); 

     return (
      <Col sm={3}> 
       <FormGroup controlId="formControlsSelect"> 
        <ControlLabel>Select</ControlLabel> 
        <FormControl componentClass="select" placeholder="select" onChange={this._handleChange.bind(this)} value={this.state.value}> 
         {this.props.data.map((option, index) => { 
          return <option key={index} value={option.value}>{option.location}</option>; 
         })}; 
        </FormControl> 
       </FormGroup> 
      </Col> 
     ); 
    } 
} 

export default App; 

Dies funktioniert nicht. Ich hoffe, dass mich jemand auf den richtigen Weg bringt, um das zu schaffen.

Answer 1

Also, das ist eine ziemlich breite Frage, deshalb ist meine Antwort vielleicht nicht genau das, wonach Sie suchen. Und es gibt ein paar zu viele Fehler in dem Code, den Sie mir gegeben haben, um bestimmte Änderungen vorzunehmen, die Ihren Code funktionieren lassen, aber ich gebe Ihnen einen Beispielcode, der Sie auf den richtigen Weg bringen könnte.

Hier ist ein Beispiel für das Hinzufügen neuer Elemente zum Rendern. Beachten Sie, wie die Schaltfläche Elemente zum Status hinzufügt.

class AddingItems extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     items: [], 
    }; 
    } 
    handleClick(){ /*Add items to state*/ 
    let newItem = <div>Item</div>; 
    this.setState({items: this.state.items.concat([newItem])}); 
    } 
    render(){ 
    return <div> 
     {this.state.items /*render items from state*/} 
     <button onClick={this.handleClick.bind(this)}>Add item!</button> 
    </div>; 
    } 
} 

---

Zweitens würde ich vorschlagen, Ihre ‚Daten-Klasse‘ aus einem Array auf eine Karte zu ändern, Früchte würde dann in etwa so aussehen:

fruits: { 
      banana: { selected: false, fruit: 'Banana'}, 
      apple: { selected: false, fruit: 'Apple'}, 
      orange: { selected: false, fruit: 'Orange'} 
     } 

diese Weise können Sie auf sie zugreifen können this.state.fruits.banana oder this.state.fruits["banana"].