2015-08-04 38 views
8

Tôi muốn có quy trình làm việc tự động như dưới đây. Thay vì hiển thị ID số, ​​hãy nói 123 trong trường văn bản, tôi muốn hiển thị thông tin tùy chỉnh.Tự động hoàn thành với các thành phần React

enter image description here

Trong khi tôi có thể làm phần còn lại với phản ứng, tôi vẫn cần phải làm autocomplete. Tôi có hai yêu cầu:

  1. Khi được chọn, cung cấp một callback với dữ liệu phong phú {id: 123, title:"Prince Hall", info:"123 Foo St"}
  2. Có hiển thị tùy chỉnh cho phép tôi sử dụng lại các mẫu JSX

jQueryUI và Twitter tự động hoàn thành có cả tính năng. Nhưng việc hiển thị mục của họ mất là chuỗi dựa trên, nhưng tôi muốn sử dụng lại các mẫu JSX dựa trên virtual-dom. Tôi không muốn sao chép/hardcode JSX mẫu với các mẫu chuỗi.

+0

bạn có thể vui lòng thêm mã bạn đã bắt đầu và những gì không hoạt động không? Như được viết, câu hỏi này quá rộng, nó yêu cầu chọn một thành phần cho bạn, và sau đó viết mã. – WiredPrairie

+0

@WiredPrairie, vâng tôi có cảm giác rằng câu hỏi này khó trả lời, câu hỏi đề xuất. Tôi bắt đầu với tính năng tự động hoàn thành của JqueryUI và Twitter và chúng có hiển thị tùy chỉnh, nhưng chỉ với các mẫu chuỗi; và sử dụng dom ảo của React với kết xuất chuỗi là một vấn đề không thể giải quyết được. Đó là lý do tại sao tôi hỏi nếu có bất kỳ tự động hoàn thành nào có thể chơi tốt với hiển thị Phản hồi. Xin lỗi từ ngữ quá lười. – aitchnyu

Trả lời

4

React-Autosuggest là thành phần đáp ứng các yêu cầu. Nó có hiển thị tùy chỉnh hoạt động nguyên bản với các phần tử React.

Chúng tôi có thể làm cho nó xử lý các đối tượng JS thay vì các chuỗi đơn giản.

  1. các onSuggestionSelected đạo cụ là một callback để có được những gợi ý chọn
  2. suggestionRenderer phương pháp có gợi ý và trả về Phản ứng đánh dấu

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

Các vấn đề liên quan