Tag name user bằng reactjs-redux

ai đã từng làm phần tag name user bằng @ chưa cho e xin cách làm hoặc soucre mẫu với ạ… e đang làm phần này mà chưa biết xử lý nó ntn hết… cảm ơn m.n đã đọc ạ

tag name user bằng @ là như nào nhỉ, có phải là khi gõ @ thì hiện ra 1 list danh sách các user với tên có ký tự trùng với chữ khi nhập vào không. Thử google trước với key work react tag, autocomplete để xem cách làm của họ

2 Likes

đúng r bạn… mình có đọc trên stackoverlow rồi nhưng mà chưa hiểu lắm nên mới hỏi ạ

với những cái đơn giản, bạn không nắm idea thì vẫn có thể xem code mẫu và làm theo được (vì chỉ dùng 1 2 kiến thức và flow đơn giản)

nhưng với những cái không đơn giản (cái này cũng chưa gọi là phức tạp) thì bạn không thể chơi cái trò như vậy được.

đại khái idea nó như sau

  1. bắt sự kiện người ta gõ gì đó bắt đầu với @va_co_the_la_gi_do_phia_sau
  2. tìm kiếm danh sách tag theo input và hiển thị + Filter lại danh sách theo sự kiện gõ phím
  3. bắt sự kiện chọn tag

trong đó bước 2 thì tùy vào business.

  • Danh sách đó có thể là có sẵn (một danh sách cố định), vậy thì cứ lọc và hiển thị theo danh sách này thôi
  • Danh sách đó có thể là data gì đó ở server thì bạn cần phải có giao tiếp với server. Tới đây lại có 2 thể loại filter, [lấy hết và filter trên frontend] hoặc [gửi keyword cho server và nhận về danh sách đã filter]. Để đưa ra lựa chọn thì còn tùy vào business và data nhiều hay ít, tần suất gọi api tag này nhiều hay ít, cache như thế nào

dùng thư viện gì đó chỉ giải quyết ui, chứ không giải quyết được toàn bộ đâu, nên kiến thức nền tảng vẫn là quan trọng. có thể bạn chưa từng làm feature đó, nhưng cũng có thể nghĩ ra một giải pháp (dù là cùi bắp khó xài) hoặc đọc giải pháp của người khác cũng dễ hiểu hơn. hoặc bạn có thể tự phân tích vấn đề và tìm giải pháp cho từng vấn đề sẽ dễ dàng hơn (như chia làm 3 bước ở trên hoặc nhiều hơn)

5 Likes

dạ e cảm ơn a ạ… a cho e hỏi… là khi mình bắt đầu bắt sự kiện của input với (e.taget.value) thì e muốn bắt thêm sự kiện khi nhập @ vào thì list ra user…v chỗ value của input mình thêm cái gì ạ… và mình fillter ntn để khi gõ @ thì nó sẽ hiển thị ra list users ạ… có phải bắt sự kiện @ là onkeyPress k ạ…e người mới nên còn non nớt… rất mong m.n hỗ trợ ạ

đúng rồi, cứ nghĩ đơn giản là vậy đi, khi có keypress thì kiểm tra coi có phải người dùng đang muốn tag gì đó không

đâu phải lúc nào kí tự vừa press cũng là @ mới là tag đâu,
ví dụ như người ta đang gõ dở dang @nh thì tiếp tục gõ a rồi t thì cũng là đang tag. Vậy nên cách kiểm tra là check nội dung người ta gõ từ cuối cùng có bất đầu là @ hay không, có thì xử lý và hiện danh sách, không thì là một từ bình thường, không làm gì cả

4 Likes

dạ ok a… e đã hiểu ạ… e cảm ơn a ạ

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?