suspense react hocs fragments codesplit javascript reactjs

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