reactjs의 드롭 다운에서 선택한 값의 키를 얻는 방법은 무엇입니까?

반응식에서 html을 선택하기 위해 키 - 값 쌍이있는 json 데이터를 바인딩하는 방법입니다. 드롭 다운에 값을 표시해야합니다. 값을 선택하면 관련 키를 제공해야합니까?reactjs의 드롭 다운에서 선택한 값의 키를 얻는 방법은 무엇입니까?

예를 들어

: 내가 선택하는 경우

드롭 다운에서

var optionsdata = [ 
    {key='101',value='Lion'}, 
    {key='102',value='Giraffe'}, 
    {key='103',value='Zebra'}, 
    {key='104',value='Hippo'}, 
    {key='105',value='Penguin'} 
    ];

, 그것은 "사자"를 표시해야합니다는, "기린", "얼룩말", ... 는, 얼룩말, 나는 선택을 얻어야한다 값 (지브라) 및 키 (위의 예에서 103)

출처

2016-11-24 MemoryLeak

당신은'optionsData', 왜 당신이 키를 얻기 위해 선택된 값과 일치하지 않는했기 때문에? – Khang

@ Khang, 작동 하겠지만이 경우 중복 된 항목을 어떻게 처리합니까? 예를 들어 학생 이름과 학생 ID (키)가있는 경우 두 명의 학생이 같은 이름을 가질 수 있습니다 – MemoryLeak

'키'는 고유 한 권리입니까? 'option value = {prop.key}> {prop.value}' – Khang

선택한 옵션의 값을 얻으면 개체의 데이터를 filter으로 간단히 출력 할 수 있습니다. 필자는 예제에서 제어 된 입력을 사용하지 않았지만 사용하면 더 좋을 것입니다.

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     optionsdata : [ 
 
     {key:'101',value:'Lion'}, 
 
     {key:'102',value:'Giraffe'}, 
 
     {key:'103',value:'Zebra'}, 
 
     {key:'104',value:'Hippo'}, 
 
     {key:'105',value:'Penguin'} 
 
     ] 
 
    } 
 
    } 
 
    handleChange = (e) => { 
 
    console.log(e.target.value); 
 
    var value = this.state.optionsdata.filter(function(item) { 
 
     return item.key == e.target.value 
 
    }) 
 
    console.log(value[0].value); 
 
    } 
 
    render() { 
 
    return (
 
     <select onChange={this.handleChange}> 
 
     {this.state.optionsdata.map(function(data, key){ return (
 
      <option key={key} value={data.key}>{data.value}</option>) 
 
     })} 
 
     </select> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script> 
 
<div id="app"></div>

출처

2016-11-24 03:39:42

이 경우 중복 된 항목을 어떻게 처리합니까? 예를 들어 학생 이름과 학생 ID (키)가있는 경우 두 명의 학생이 같은 이름을 가질 수 있습니다. – MemoryLeak

네가 옳았다는 점에서 값 속성을 키로 포함하도록 코드를 변경하여 고유 할 것입니다. 우리는이 키 속성에서 해당 값을 찾을 수 있습니다 –

덕분에, 감사합니다 – MemoryLeak

react-select을 사용하십시오. id 및 value을 우아하게 처리 할 수 있습니다. id을 맵핑하여 value을 선택하고 value을 선택하여 label을 선택하십시오.

콜백을 구성하여 선택한 값을 반환 할 수 있습니다. 검색 기능을 켤 수도 있습니다.

출처

2016-11-24 03:36:45 luboskrnac

당신의 제안에 감사드립니다. 그러나 나는 자신의 구성 요소를 구축하고 있습니다. – MemoryLeak

바퀴를 재발견하십시오.) – luboskrnac

reactjs의 드롭 다운에서 선택한 값의 키를 얻는 방법은 무엇입니까?

답변

관련 문제