Get Selected Option Attribut in React

Question

Ich möchte Attribut aus meiner Auswahlliste zu erhalten.

In der Zwischenzeit ist mein Code unten wie:

var Billing = React.createClass({ 
 
    getInitialState() { 
 
    return { 
 
     associations: [], 
 
     value: '', 
 
     associationsList: '1' 
 
    }; 
 
    }, 
 
    handleChange(event) { 
 
    this.setState({value: event.target.value}); 
 
    }, 
 
    handleOption(event){ 
 
    var option = event.target.getAttribute('data-id'); 
 
    this.setState({associationsList: option}); 
 
    }, 
 
    render() { 
 
    var listAssociations = this.state.associations.map(function(index){ 
 
     return (
 
      <option onChange={this.handleOption} value={index.name} data-id={index.id} ref={index.name} key={index.id}>{index.name}</option> 
 
     ) 
 
    }); 
 

 
    var BillingInfo 
 
    { 
 
     if(this.state.associationsList == "0") 
 
     { 
 
     return ( 
 
     <div> 
 
     <Tabs selected={0}> 
 
      <Pane label="Billing Info"> 
 
      <div className="row"> 
 
       <div className="small-12"> 
 
        Associations: 
 
        <select value={this.state.value} onChange={this.handleChange}> 
 
        {listAssociations} 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
      {this.state.value}<br/> 
 
      {this.state.associationsList} 
 
      Basic package 
 
      </div> 
 
      </Pane> 
 
      <Pane label="Billing History"> 
 
      <div>Billing history</div> 
 
      </Pane> 
 
     </Tabs> 
 
     </div> 
 
    );

I Option Wert mit "index.name" definiert ich will "Daten-id" abrufen zu verschiedener Ausgabe zu erhalten. Kann mir jemand dabei helfen?

BEARBEITET

Ich habe meinen Code wie folgt aktualisiert. Aber ich kann immer noch nicht die Daten-ID oder gibt es eine andere Methode, ich kann meine Daten-ID ohne gesetzt "Wert" mit "ID".

handleChange(event) { 
 
    var index = event.target.selectedIndex; 
 
    var optionElement = event.target.childNodes[index] 
 
    var option = optionElement.getAttribute('data-id'); 
 
    this.setState({ 
 
    associationsList: option, 
 
    value: event.target.value 
 
    }); 
 
    }, 
 
    render() { 
 
    var listAssociations = this.state.associations.map(function(index){ 
 
     return (
 
      <option value={index.name} data-id={index.id} ref={index.name} key={index.id}>{index.name}</option> 
 
     ) 
 
    }); 
 

 
    var BillingInfo 
 
    { 
 
     if(this.state.associationsList == "0") 
 
     { 
 
     return ( 
 
     <div> 
 
     <Tabs selected={0}> 
 
      <Pane label="Billing Info"> 
 
      <div className="row"> 
 
       <div className="small-12"> 
 
        Associations: 
 
        <select value={this.state.value} onChange={this.handleChange}> 
 
        {listAssociations} 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
      {this.state.value}<br/> 
 
      {this.state.associationsList} 
 
      Basic package 
 
      </div> 
 
      </Pane> 
 
      <Pane label="Billing History"> 
 
      <div>Billing history</div> 
 
      </Pane> 
 
     </Tabs> 
 
     </div> 
 
    ); 
 
     }

Answer 1

Dank SquGeim für seinen Vorschlag.

Ich habe herausgefunden, wie ich verschiedene Daten in einer ausgewählten Option erhalten kann. Ich habe meinen Code geändert:

var listAssociations = this.state.associations.map(function(index){ 
 
     return (
 
      <option value={index.package} data-id={index.id} ref={index.name} key={index.id}>{index.name}</option> 
 
     ) 
 
    }); 
 
    
 
var BillingInfo 
 
    { 
 
     if(this.state.value == "0") 
 
     { 
 
     return ( 
 
     <div> 
 
     <Tabs selected={0}> 
 
      <Pane label="Billing Info"> 
 
      <div className="row"> 
 
       <div className="small-12"> 
 
        Associations: 
 
        <select value={this.state.package} onChange={this.handleChange}> 
 
        {listAssociations} 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div> 
 
      Package={this.state.value}<br/> 
 
      ID={this.state.associationsList}<br/> 
 
      <h3> Recober Package </h3> 
 
      You are currently <b>Small Association</b>. If you have more than 7 members, you may<br/> 
 
      <b>upgrade</b> your package to Growing Association. 
 
      </div> 
 
      </Pane>

Das Problem für meine Frage ist i "index.name" auf Option "Wert" statt put "index.package" Attribut gesetzt. Jetzt funktioniert es perfekt!

Answer 2

Sie können den Index des option Element erhalten, die derzeit in der onChange Ereignis in select ausgewählt ist:

handleChange(e) { 
    var index = e.target.selectedIndex; 
    var optionElement = e.target.childNodes[index] 
    var option = optionElement.getAttribute('data-id'); 
    this.setState({ 
    associationsList: option, 
    value: event.target.value 
    }); 
} 

Das dort bedeuten wird nicht nötig sein, haben ein onChange-Handler in den option Elementen (handleOption).