Tengo un filtro donde clasifico los datos por fecha y respuestas, al principio solo estaba filtrando por fecha, así que estaba usando data.target.value y estaba funcionando, ya que agregué la clasificación de respuestas tuve que usar el conjunto de datos, después al hacer esto, data.target.dataset.dir & data.target.dataset.sort devuelve indefinido
En un componente secundario, tengo una selección, SelectField representa la selección con un componente con estilo:
<SelectField onChange={props.triCallback} > <option data-sort="date" data-dir="desc">Filter by</option> <option data-sort="date" data-dir="asc">Date asc</option> <option data-sort="date" data-dir="desc">Date desc</option> <option data-sort="answers" data-dir="asc">Answers asc</option> <option data-sort="answers" data-dir="desc">Answers Desc</option> </SelectField>Y en mi App.js tengo este método que maneja la clasificación:
constructor(props) { super(props); this.state = { sorting : 'date', sortDir : 'desc', }; } onTriChanged = data => { const sorting = data.target.dataset.sort; const sortDir = data.target.dataset.dir; this.setState({ sortDir: sortDir, sorting: sorting }, () => { this.fetchData() }); };Dado que <SelectField> en realidad representa un <select> nativo debajo, entonces es bastante sencillo. La razón por la que data.target.dataset... devuelve indefinido es porque los atributos de data- HTML5 que desea recuperar en realidad residen en el elemento <option> seleccionado y no en el elemento <select> , el último al que hacen referencia data.target
Por lo tanto, deberá acceder al elemento de selección <option> , utilizando la propiedad selectedIndex . El elemento <select> nos permite acceder a la colección anidada de elementos <option> a través de la propiedad options .
onTriChanged = data => { const selectedOption = data.target.options[data.target.selectedIndex]; const sorting = selectedOption.dataset.sort; const sortDir = selectedOption.dataset.dir; this.setState({ sortDir: sortDir, sorting: sorting }, () => { this.fetchData() }); };