React select async – Marcos Peña

Escenario

Estoy diseñando un formulario web en el que quiero mostrar un combo que se carga dinámicamente con una petición XHR.

Problema

Los datos a cargar cuentan con miles de registros. Necesito un combo que se cargue de manera dinámica y disponga de un autocomplete para filtrar los resultos.

Solución

React select es un módulo de React que he venido usando desde hace algún tiempo y siempre ha respondido a mis expectativas. Hasta ahora nunca lo había utilizado para cargar los datos de manera asíncrona. La diferencia es que, en vez de usar el componente por defecto, usamos react-select/async y la llamada loadOptions debe devolver un promise. Al final, he acabado descartando usar un react-select porque necesitaba cargar más de 7000 registros y por muy rápido y asíncrono que sea, la capacidad de reacción del combo disminuye considerablemente, afectando la experiencia de usuario. Aun así me he dicho que voy a dejar el código por aquí por si algún otro día me hace fata:

import React from 'react';
let ReactDom = require('react-dom');
import AsyncSelect from 'react-select/async';


class OfficeSearch extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedOffice: null,
        };
    }

    getOfficesOptions = (inputValue) => {
        const url = '/api/office';
        let request = new Request(url, {
            credentials: 'same-origin',
            headers: new Headers({
                'Content-Type': 'text/plain'
            })
        });

        return fetch(request, { method: 'get' }).then(response => response.json());
    };

    handleOfficeChange = selectedOffice => {
        this.setState(
            { selectedOffice },
            () => console.log(`Option selected:`, this.state.selectedOffice)
        );
    };

    render() {
        const { selectedOffice } = this.state;

        return (
            <AsyncSelect
                cacheOptions
                defaultOptions
                value={selectedOffice}
                getOptionLabel={o => o.code}
                getOptionValue={o => o.id}                
                onChange={this.handleOfficeChange}
                loadOptions={this.getOfficesOptions}
                noOptionsMessage={() => 'No hay datos'}
                loadingMessage={() => 'Cargando…'}
                placeholder= 'Seleccionar…'
            />
        );
    }
}

let container = document.getElementById('office-search-container');
if (container !== null) {
    ReactDom.render(<OfficeSearch />, container);
}

import React from 'react';

let ReactDom = require('react-dom');

import AsyncSelect from 'react-select/async';

class OfficeSearch extends React.Component {

constructor(props) {

super(props);

this.state = {

selectedOffice: null,

};

}

getOfficesOptions = (inputValue) => {

const url = '/api/office';

let request = new Request(url, {

credentials: 'same-origin',

headers: new Headers({

'Content-Type': 'text/plain'

})

});

return fetch(request, { method: 'get' }).then(response => response.json());

};

handleOfficeChange = selectedOffice => {

this.setState(

{ selectedOffice },

() => console.log(`Option selected:`, this.state.selectedOffice)

);

};

render() {

const { selectedOffice } = this.state;

return (

<AsyncSelect

cacheOptions

defaultOptions

value={selectedOffice}

getOptionLabel={o => o.code}

getOptionValue={o => o.id}

onChange={this.handleOfficeChange}

loadOptions={this.getOfficesOptions}

noOptionsMessage={() => 'No hay datos'}

loadingMessage={() => 'Cargando…'}

placeholder= 'Seleccionar…'

);

}

let container = document.getElementById('office-search-container');

if (container !== null) {

ReactDom.render(<OfficeSearch />, container);

}

Escenario

Problema

Solución

Deja una respuesta Cancelar la respuesta