2016-09-23 2 views
0

select에 초기 값을 설정하려고했지만 뷰에 표시하려고하지 않습니다.ReactJS select 초기 값이 뷰에 반영되지 않음

내 jsx :

var SelectOKNO = React.createClass({ 
render() { 
return (
    <div> 
     <select className="selectpicker" value={this.props.value} 
              onChange={this.props.onChange.bind(this)}> 
      <option value=""></option> 
      <option value="OK">OK</option> 
      <option value="NO">NO</option> 
     </select> 
    </div> 
) 
} 
}); 

var Detalle = React.createClass({ 
getInitialState: function() { 
    return({ 
     ID:'', 
     UREFValue: '', 
     URCorrectoValue: '', 
     ConcordanciaValue: '', 
     PruebasValue: '', 
     EmergenciasValue: '', 
     ComentarioValue: '',   
     EstadoValue:'', 
     rec_fecha_aprobacion:'', 
     rec_aplica_control: '', 
     rec_auditor: '' 
    }); 
}, 
handleChange: function (key) { 
return function (e) { 
    var state = {}; 
    state[key] = e.target.value; 
    this.setState(state); 
}.bind(this); 
}, 
componentDidMount: function() { 
    $.ajax({ 
     url: 'url', 
     data: { //Passing data 
       id: $("#hdnID").val() 
      }, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
      this.setState({ 
          ID:data.rec_id, 
          UREFValue:data.rec_inconveniente_usuario_ref, 
          URCorrectoValue:data.rec_usuario_ref_correcto, 
          ConcordanciaValue:data.rec_concordancia_doc, 
          PruebasValue:data.rec_pruebas, 
          EmergenciasValue:data.rec_emergencia, 
          ComentarioValue:data.rec_comentario, 
          EstadoValue: data.rec_estado, 
          rec_fecha_aprobacion:data.rec_fecha_aprobacion, 
          rec_aplica_control: data.rec_aplica_control, 
          rec_auditor: data.rec_auditor 
         }); 
     }.bind(this), 
     error: function(xhr, status, err) { 

     }.bind(this) 
    }); 
    }, 
render() { 
return (

     <form onSubmit={this.handleSubmit}> 

      <br/> 
      <table className="table borderless"> 

       <tr className ="row"> 

        <td>Usuario Referente: 
        <SelectOKNO value={this.state.UREFValue} onChange={this.handleChange('UREFValue').bind(this)}/> 
        </td> 

        <td>UR Correcto: 
        <textarea rows="3" className="form-control noresize" value={this.state.URCorrectoValue} onChange={this.handleChange('URCorrectoValue')} /> 
        </td> 

       </tr> 

       <tr className ="row"> 

        <td>Concordancia: 
        <SelectOKNO value={this.state.ConcordanciaValue} onChange={this.handleChange('ConcordanciaValue')}/> 
        </td> 

        <td>Pruebas: 
        <SelectOKNO value={this.state.PruebasValue} onChange={this.handleChange('PruebasValue')}/> 
        </td> 

       </tr> 

       <tr className ="row"> 

        <td>Emergencias: 
        <SelectOKNO value={this.state.EmergenciasValue} onChange={this.handleChange('EmergenciasValue').bind(this)}/> 
        </td> 

        <td>Comentario: 
        <textarea rows="3" className="form-control noresize" value={this.state.ComentarioValue} onChange={this.handleChange('ComentarioValue')} /> 
        </td> 

       </tr> 

       <tr className ="row"> 

        <td> 

         <select className="selectpicker" value={this.state.EstadoValue} 
              onChange={this.handleChange('EstadoValue')}> 
          <option value="Abierto">Abierto</option> 
          <option value="EN_PROCESO">En Proceso</option> 
          <option value="CON_INCONVENIENTES">Con Inconvenientes</option> 
          <option value="COMPLETO">Completo</option> 
         </select> 

        </td> 
        <td> 

         <button type="submit" className="btn btn-default">Guardar</button> 

        </td> 

       </tr> 
      </table> 
     </form> 
) 
} 
}); 

페이지를로드 할 때, 모든 선택 쇼 값 ''와 같은. photo1

그러나 크롬의 디버그보기에서 나는 값을 고급에서 enter image description here

감사를 볼 수 있습니다.

답변

관련 문제