Así que estoy tratando de obtener el valor de un elemento select en reactjs, pero simplemente no puedo resolverlo. El this.refs.selectElement.getDOMNode().value siempre viene como undefined . Todos los demás controles en el formulario, como el text , funcionan bien. ¿Algunas ideas? ¿Es que no puede obtener el valor del elemento select a través de refs y debe usar el evento onChange ?
Actualizado:
var TestSelectClass = React.createClass({ mixins: [Router.Navigation], _handleDube: function(event) { DubeActionCreators.DubeTest({ message: this.refs.message.getDOMNode().value, tax: this.refs.tax.getDOMNode().value, validity: this.refs.valid_for.getDOMNode().value }); }, render: function() { return ( <ReactBootstrap.ListGroup> <textarea className="form-control" rows="3" placeholder="Enter message" ref="message" > </textarea> <div className="input-group"> <span className="input-group-addon" id="basic-addon1">$</span> <input type="text" className="form-control" placeholder="10" aria-describedby="basic-addon1" ref="tax" /> </div> <Input type="select" value="1" ref="valid_for"> <option value="1">1 hour</option> <option value="2">1 day</option> <option value="2">5 days</option> </Input> </ReactBootstrap.ListGroup> ) } }); Actualizado: Solución Entonces, si alguien se encuentra con algo similar, aparentemente si está usando react-bootstrap, no puede acceder al elemento Input si lo ha envuelto en un ListGroup . Sáquelo o envuelva todos los elementos de Input en una etiqueta <form> . Esto resolvió mi problema, gracias por toda la ayuda.
es bastante simple:
en el método de renderizado, debe vigilar el bind(this)
<select onChange={this.yourChangeHandler.bind(this)}> <option value="-1" disabled>--</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select>y su controlador es como:
yourChangeHandler(event){ alert(event.target.value) }Veo que está utilizando react-bootstrap , que incluye un contenedor alrededor de los elementos de entrada regulares.
En este caso, debe usar la función contenedora getInputDOMNode() para obtener el elemento DOM real de la entrada subyacente. Pero también puede usar la función de conveniencia getValue() que proporciona react-bootstrap para elementos de entrada .
Entonces su función _handleDube debería verse así:
_handleDube: function(event) { DubeActionCreators.DubeTest({ message: this.refs.message.getInputDOMNode().value, tax: this.refs.tax.getInputDOMNode().value, validity: this.refs.valid_for.getValue() }); },Consulte este JSFiddle para ver un ejemplo completo: http://jsfiddle.net/mnhm5j3g/1/
Haz una función handleChange(). Luego, ponlo en tu render() así:
<Input type="select" value="1" ref="valid_for" onChange={this.handleChange}>Y la función en el componente:
handleChange: function(e) { var val = e.target.value; },