양방향 바인딩 요소 선택 방법

Question

선택 요소를 포함하는 선택 요소의 양방향 바인딩 인 반응에서 select 요소를 만드는 방법은 무엇입니까? 디폴트 선택은 값이 임의이기 때문에 생성 될 수있는 prop의 현재 속성이어야하며, 선택시 prop 속성이 선택을 반영해야합니다. 또한 선택 필드에 직접 값을 쓸 수 있어야합니다.

Answer 1

가 아닌 "승인"과 같은 방식으로,하지만 당신은 몇 가지주의해야합니다.

1. 변경 이벤트가 요소가 아닌 요소에 트리거를

2. Controlled and uncontrolled components defaultValue are set differently .

이 여기

var MyDropdown = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: 'select' 
     } 
    }, 
    change: function(event){ 
     this.setState({value: event.target.value}); 
    }, 
    render: function(){ 
     return(
      <div> 
       <select id="fruit" onChange={this.change} value={this.state.value}> 
        <option value="select">Select</option> 
        <option value="Apples">Apples</option> 
        <option value="Mangoes">Mangoes</option> 
       </select> 
       <p></p> 
       <p>{this.state.value}</p> 
      </div> 
     ); 
    } 
}); 

React.render(<MyDropdown />, document.body); 

와는 working demo의 제어 드롭 다운 메뉴의 일반적인 예입니다.