thắc mắc Cần giúp đỡ về React (.ft Typesciprt, AntD)

Duongbeosyeudoi

Duongbeosyeudoi

Senior Member
Xin chào mọi người, em hiện đang intern cho một công ty, hiện tại em đang được giao cho task sau. mà chưa làm được.
Task của em là hiện tại mỗi thằng user có một số roles có sẵn, việc của em hiện tại là phải xử lý khi add thêm 1 role mới (chưa submit) thì phải hiện list các roles còn lại có thể thêm cho người dùng.
Source code hiện tại đang hiển thị allRoles, tất cả các roles có thể có để người dùng có thể thêm vào, như vậy thì tránh được việc rerender nhưng như mọi người có thể thấy UX đang có vấn đề (trùng lặp roles hiện có).
Vậy mọi người có thể giúp em xử lý tasks này được không ạ? Em cảm ơn

https://codesandbox.io/s/musing-voice-jc22ob
https://github.com/duongyeudoi/typescriptForm
 

Attachments

  • Screen Shot 2022-06-16 at 1.56.15 PM.png
    Screen Shot 2022-06-16 at 1.56.15 PM.png
    9 KB · Views: 35
  • Screen Shot 2022-06-16 at 1.56.28 PM.png
    Screen Shot 2022-06-16 at 1.56.28 PM.png
    12.1 KB · Views: 44
  • Screen Shot 2022-06-16 at 1.56.40 PM.png
    Screen Shot 2022-06-16 at 1.56.40 PM.png
    27 KB · Views: 33
Last edited:
midnight_sun said:
xử lý state nhiều thì dùng react hook form đi, form antd gặp các case state phức tạp khó làm lắm
Click to expand...
Đọc sơ qua thì Antd.Form cover hầu hết case của react-hook-form mà nhỉ
Y8aLVdj.png
lib không phải vấn đề gốc ở đây.

@thớt: https://ant.design/components/form/#Form.useWatch
watch để catch current value của [$user].roles sau đó có thể disable thằng Select.Option tương ứng.
 
Last edited:
em vừa update codesandbox ở #1 ạ, về cơ bản thì thằng user của em có sẵn vài roles (vd là admin và system), em muốn khi add roles mới cái select options sẽ k còn 2 cái role đã có. và mình cũng có thể edit roles đã có nữa ạ @@
 
Xiao_man_tau said:
Đọc sơ qua thì Antd.Form cover hầu hết case của react-hook-form mà nhỉ
Y8aLVdj.png
lib không phải vấn đề gốc ở đây.

@thớt: https://ant.design/components/form/#Form.useWatch
watch để catch current value của [$user].roles sau đó có thể disable thằng Select.Option tương ứng.
Click to expand...
cái version antd của em thì chưa có cái hook này, anh có thể xem qua cái codesandbox của em để dễ hình dung hơn ạ :))
 
form của antd nó có value mà đúng hem, ng dùng đã có cái nào thì lưu vào 1 array state đi, rồi trong cái list filter những cái chưa có.
 
bạn lưu cái state của cái dropdown mới đc thêm ở childcomponent thế kia thì làm sao th parent nó biết bạn vừa chọn gì để disable. cho hết lên parent đi chứ
 
Nói bạn thớt đừng tự ái, code nhìn hổ lốn thực sự.

Mình là antifan của Typescript, vì nó làm mất đi cái sự lỏng lẻo, đẹp đẽ vốn có của Javascript. Cần phải dùng thì dùng chứ mình là người quyết định thì sẽ ko bao giờ dùng.

Thứ nữa là rất dị ứng với mấy cái thư viện tiện dụng kiểu antd, vì nó làm cho số đông nên mỗi khi cần customize hay case phức tạp thì nó khá mất công. Tất nhiên cái này là đánh đổi thôi, team đông cần đồng nhất style và làm những cái đơn giản thì thư viện kiểu này nó cũng tiện.

Về cái vấn đề của chủ thớt nếu ko dùng antd chắc nó dễ hơn. Nhưng trót dùng rồi thì có thể làm theo hướng đó là tạo thêm 1 cái state ở component cha của cái component dropdownlist ấy, gọi là selectedRoles chẳng hạn.
Ở cái component có dropdownlist thì truyền vào 1 prop là 1 function, để khi có thay đổi value trong cái dropdown thì call đến cái function đó, update cái selectedRoles cho các thằng khác đều biết mà cập nhật.
Và cái selectedRoles này cũng truyền vào component đó luôn, chính là quyết định xem khi click vào dropdown có những gì.
Cả khi remove nữa, cũng có hành động tương tự như khi thay đổi giá trị trong dropdown, chỉ có cái bọn antd này làm key hơi ngu là toàn 0,1,2,3.
Và đặc biệt cẩn thận để ko bị infinite loop.
 
chimsedinang_no1 said:
Nói bạn thớt đừng tự ái, code nhìn hổ lốn thực sự.

Mình là antifan của Typescript, vì nó làm mất đi cái sự lỏng lẻo, đẹp đẽ vốn có của Javascript. Cần phải dùng thì dùng chứ mình là người quyết định thì sẽ ko bao giờ dùng.

Thứ nữa là rất dị ứng với mấy cái thư viện tiện dụng kiểu antd, vì nó làm cho số đông nên mỗi khi cần customize hay case phức tạp thì nó khá mất công. Tất nhiên cái này là đánh đổi thôi, team đông cần đồng nhất style và làm những cái đơn giản thì thư viện kiểu này nó cũng tiện.

Về cái vấn đề của chủ thớt nếu ko dùng antd chắc nó dễ hơn. Nhưng trót dùng rồi thì có thể làm theo hướng đó là tạo thêm 1 cái state ở component cha của cái component dropdownlist ấy, gọi là selectedRoles chẳng hạn.
Ở cái component có dropdownlist thì truyền vào 1 prop là 1 function, để khi có thay đổi value trong cái dropdown thì call đến cái function đó, update cái selectedRoles cho các thằng khác đều biết mà cập nhật.
Và cái selectedRoles này cũng truyền vào component đó luôn, chính là quyết định xem khi click vào dropdown có những gì.
Cả khi remove nữa, cũng có hành động tương tự như khi thay đổi giá trị trong dropdown, chỉ có cái bọn antd này làm key hơi ngu là toàn 0,1,2,3.
Và đặc biệt cẩn thận để ko bị infinite loop.
Click to expand...
Typescript chỉ là một thằng compiler, trong thế giới tối giản của React thậm chí chỉ cần biết type/interface là đủ, vậy nên nó không có lỗi.

Thằng ant design cũng không phải vấn đề đáng quan tâm, nếu không dùng thì anh cũng phải install 1 cái 3rd package để handle form chứ đâu có built in, rồi các ui component với 1 project dạng admin như ở đây thì theo anh em có nên tự build từ đầu không?


Giải pháp trước mắt vẫn là tìm cái danh sách roles đã chọn, lưu vào đâu đó rồi ẩn thằng Option tương ứng.
 
chimsedinang_no1 said:
Nói bạn thớt đừng tự ái, code nhìn hổ lốn thực sự.

Mình là antifan của Typescript, vì nó làm mất đi cái sự lỏng lẻo, đẹp đẽ vốn có của Javascript. Cần phải dùng thì dùng chứ mình là người quyết định thì sẽ ko bao giờ dùng.

Thứ nữa là rất dị ứng với mấy cái thư viện tiện dụng kiểu antd, vì nó làm cho số đông nên mỗi khi cần customize hay case phức tạp thì nó khá mất công. Tất nhiên cái này là đánh đổi thôi, team đông cần đồng nhất style và làm những cái đơn giản thì thư viện kiểu này nó cũng tiện.

Về cái vấn đề của chủ thớt nếu ko dùng antd chắc nó dễ hơn. Nhưng trót dùng rồi thì có thể làm theo hướng đó là tạo thêm 1 cái state ở component cha của cái component dropdownlist ấy, gọi là selectedRoles chẳng hạn.
Ở cái component có dropdownlist thì truyền vào 1 prop là 1 function, để khi có thay đổi value trong cái dropdown thì call đến cái function đó, update cái selectedRoles cho các thằng khác đều biết mà cập nhật.
Và cái selectedRoles này cũng truyền vào component đó luôn, chính là quyết định xem khi click vào dropdown có những gì.
Cả khi remove nữa, cũng có hành động tương tự như khi thay đổi giá trị trong dropdown, chỉ có cái bọn antd này làm key hơi ngu là toàn 0,1,2,3.
Và đặc biệt cẩn thận để ko bị infinite loop.
Click to expand...
TypeScript cũng bình thường thôi mà ông, chỉ là một chút style cho nó chặt chẽ hơn, tránh lỗi về sau. Còn code bạn kia nhìn cũng khá ổn mà nhỉ (có xuống dòng các prop trong JSX, có tách các hàm event handler), chỉ cần tách bớt logic khỏi JSX (các hàm map) cho đỡ khó đọc là ok (còn cái kiểu FC hình như React khuyến cáo bỏ rồi, không dùng nữa). Riêng cá nhân mình thì không thích cái bang bang operator lắm, để luôn Boolean() có khi dễ đọc và tường minh. Còn vụ UI framework như antd thì tùy quan điểm :big_smile:
 

Similar threads

Quocloi2003
thắc mắc Ai hướng dẫn giúp em làm Grad Cam với
Replies
0
Views
116
Quocloi2003
Quocloi2003
662663666999
thảo luận Fake camera Android
Replies
4
Views
265
662663666999
662663666999
ZeeSờTuPít
HN Tìm máy phụ 600k cấu hình mạnh nhất có thể
Replies
6
Views
338
Apple
Apple
ZeeSờTuPít
thảo luận Tìm máy phụ 600k cấu hình mạnh nhất có thể
Replies
18
Views
524
kjangg
kjangg
D
tìm việc Tìm việc làm về lập trình ạ
Replies
4
Views
307
ThoAcZz
ThoAcZz

Share this page

Back
Top