2015-08-04 11 views
8

Desidero un flusso di lavoro automatico come di seguito. Invece di visualizzare l'ID numerico, ad esempio 123 in un campo di testo, voglio mostrare informazioni personalizzate.Completamento automatico con componenti React

enter image description here

Mentre posso fare il resto con Reagire, ho ancora bisogno di fare completamento automatico. Ho due requisiti:

  1. Quando selezionata, fornire un callback con i dati ricchi {id: 123, title:"Prince Hall", info:"123 Foo St"}
  2. Avere il rendering personalizzato che mi permette di riutilizzare JSX templates

jQueryUI e Twitter autocompletes hanno entrambe le caratteristiche. Ma il rendering degli elementi necessari è basato su stringa, ma voglio riutilizzare i modelli JSX basati su dom virtuale. Non voglio duplicare/hardcode i template JSX con modelli di stringhe.

+0

potresti aggiungere il codice con cui hai iniziato e che cosa non funziona? Come scritto, questa domanda è troppo ampia, si chiede di selezionare un componente per te e quindi scrivere il codice. – WiredPrairie

+0

@WiredPrairie, sì, ho avuto la sensazione che questa domanda sia una domanda difficile da rispondere. Ho iniziato con il completamento automatico di JqueryUI e Twitter e il rendering era personalizzato, ma solo con i modelli di stringhe; e usare la dom virtuale di React con il rendering delle stringhe era un problema non annegato. Ecco perché ho chiesto se c'è un completamento automatico che può giocare bene con il rendering React. Mi spiace che la formulazione fosse troppo pigra. – aitchnyu

risposta

4

React-Autosuggest è un componente che soddisfa i requisiti. Ha un rendering personalizzato che funziona in modo nativo con elementi React.

Possiamo farlo gestire oggetti JS invece di stringhe semplici.

  1. le onSuggestionSelected oggetti di scena è un callback per ottenere il suggerimento selezionato
  2. suggestionRenderer metodo accetta il suggerimento e ritorna Reagire markup

http://react-autosuggest.js.org/