Reactで選択されたオプション属性を取得

Question

私の選択肢リストから属性を取得したい。一方、私のコードでは

は、以下のようなものです：

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

私は別の出力を取得するには、「データ-ID」を取得したい「index.name」でオプション値を定義しています。誰かがこれで私を助けることができますか？

EDITED

以下のようにコードを更新しました。しかし、まだ私は、データIDを取得することはできませんまたは私は "ID"で "値"を設定せずに私のデータ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

彼の提案のためにsqugeimに感謝します。

私は、選択した1つのオプションでどのように異なるデータを取得できるのか把握しました。 私はに私のコードを変更しました：私の質問私は、オプションの「index.name」を入れて「値」属性の代わりに、プット「index.package」のために

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>

問題を。今は完璧に動作しています！

Answer 2

あなたは現在selectにonChangeイベントで選択されているoption要素のインデックスを取得することができます：これは意味します

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

は持っている必要がなくなりますoption要素内のonChangeハンドラ（handleOption）。