javascript - hocs - react<>
Obtener texto de opciĆ³n seleccionada utilizando react js? (6)
Aquí lo que hago para recuperar el texto de la opción de selección en reaccionar js.
this.refs.selectMark[this.refs.selectMark.value].text
Tengo mi componente de lista de selección que representa mi lista de selección:
<form className="pure-form">
<select ref="selectMark" className="mark-selector"
onChange={this.onChange}>{this.getOptions()}
</select>
</form>
Tengo un método en el componente para crear las opciones:
getOptions: function () {
return this.props.renderProps.data.map(function (item) {
return <option key={item.value} value={item.value}>{item.label}</option>;
}.bind(this));
},
Mi método onChange funciona bien con el valor:
onChange: function(event) {
var newValue = event.nativeEvent.target.value;
this.props.renderProps.onSaveCare(newValue);
this.setState({value: newValue});
this.toggleEdit();
},
¿Hay alguna manera de obtener el texto de la opción? Esto me da indefinido.
event.nativeEvent.target.text; //undefined
Algo como esto debería hacer
var index = event.nativeEvent.target.selectedIndex;
event.nativeEvent.target[index].text
Aquí hay una demostración http://jsbin.com/vumune/4/
El texto de una opción es simplemente la propiedad de label
del item
correspondiente.
En su caso, para recuperar el texto de la opción seleccionada, puede hacer:
var selectedItem = this.props.renderProps.data.find(function (item) {
return item.value === event.target.value;
});
selectedItem.label;
Array.prototype.find
es parte de la propuesta ES6. Subraye o cree que ya lo ha empaquetado como el método _.find
.
Esto funciono para mi
const {options, value} = e.target;
console.log(options[value].innerHTML);
Edición: Me acabo de dar cuenta de que estaba usando el campo "valor" para almacenar el ID de algunos objetos, de 0 a n. Supongo que un mejor enfoque podría ser el siguiente:
const {options, selectedIndex} = e.target;
console.log(options[selectedIndex].innerHTML);
Puede obtener el texto de la opción reemplazando esto:
event.nativeEvent.target.text;
con este:
event.target.options[event.target.selectedIndex].text
Si se selecciona solo, aquí es más simple manera:
e.target.selectedOptions[0].text