ReactJS选择未在视图中反映的初始值

Question

我正在尝试为选择设置初始值，但不会在视图中显示。

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

当页面加载时，所有选择显示的值如''。

但是在chrome的调试视图中我可以看到值

先谢谢。

Answer 1

关于选项元素的

How to set selected。另外，请检查what that means in React.

最后，一些不错的库： react-select和 react-bootstrap