ReactJS - ReactiveSearch - Evento personalizado en la selección de sugerencias

Enlace CodeSandbox

Para la primera parte del problema, puede usar el accesorio onNoResultsen cualquiera de los componentes de resultados para renderizar JSX personalizado cuando no se encuentran resultados. De los documentos :

onNoResults String o JSX [opcional]

muestra un mensaje o componente personalizado cuando no se encuentran resultados.

<ResultList
    ...
    // custom JSX when no results are found
    onNoResults={
        <section>
            <input />
            <button>Add</button>
        </section>
    }
/>

Para la segunda parte del problema, hay dos formas en que IMO puede abordar esto.

1. Usando un ReactiveComponent que le permite crear un componente ReactiveSearch personalizado.
2. Usando customQuery

Explicaré cómo abordar esto usando, customQuerypero podría ser mejor crear un componente personalizado según el enfoque que se adapte mejor a sus necesidades.

En el ejemplo que he compartido, mi búsqueda de datos se ve así:

<DataSearch
    title="DataSearch"
    dataField={["original_title", "original_title.search"]}
    categoryField="authors.raw"
    componentId="BookSensor"
    customQuery={this.customQuery}
    defaultSelected={this.state.value}
    onValueSelected={this.updateState}
/>

La razón para usar un customQueryes tener control total de qué consulta se aplica para recuperar los resultados. ReactiveSearch está diseñado para funcionar de forma reactiva . Cuando se establece un valor en el DataSearch, ResultListreaccionará a este cambio. Tener un customQuerynos permite controlar qué consulta se activa para este cambio. Además, mantengo el valor de DataSearchen el estado para poder aclararlo cuando se activa la consulta. Esto es lo que estoy usando en el ejemplo:

customQuery = (value, props) => {
    // find the current query using defaultQuery from DataSearch
    const currentQuery = DataSearch.defaultQuery(value, props);
    // clear the value in component's state
    this.setState({
      value: ""
    });
    if (value.length) {
      // store this query
      this.prevQuery = currentQuery;
      return currentQuery;
    }
    // if the value is empty, that is it was cleared, return the previous query instead
    return this.prevQuery;
  };

Entonces, cada vez que se borra el valor, simplemente devuelvo la consulta anterior para que la lista de resultados muestre los resultados correctos para la consulta anterior (antes de que se borrara el valor).

También para controlar el valor de DataSearchmi componente, estoy usando defaultSelectedy onValueSelectedprops. Funcionan de manera bastante similar a cómo crearía un componente controlado en reaccionar. Docs

Nuevamente, podría ser mejor crear un componente personalizado usando ReactiveComponent si este enfoque suena complicado para personalizar este flujo.

Demostración para esta respuesta usando customQuery