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"로 옵션 값을 정의 할 수 있습니다. 누군가가 나를 도울 수 있습니까?

수정 됨

다음과 같이 코드를 업데이트했습니다. 하지만 여전히 데이터 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

그의 제안에 감사드립니다.

하나의 선택된 옵션에서 어떻게 다른 데이터를 얻을 수 있는지 알아 냈습니다. 내 질문에 대한

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>

문제는 내가 대신 넣어의 "index.package을"속성 "값"옵션 "index.name"를 넣을 수 있습니다 : 나는 내 코드를 변경했습니다. 이제 완벽하게 작동합니다!

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