Asked Aug 7th, 3:06 AM 71 0 1
  • 71 0 1
0

Cách set thuộc tính cursor: not-allow cho con trỏ chuột trong React App

Share
  • 71 0 1

Hello các bạn, hôm nay mình có chủ đề này đăng lên đây mong được sự giúp đỡ của mọi người.

Số là mình đang làm một cái app có chức năng authen, ở phần login của mình cũng có sử dụng nhiều phương pháp đăng nhập

như qua mail, qua tk Facebook, Google vvv... Vấn đề của mình muốn là giả dụ khi user đang login qua email và password, sau khi nhập thông tin xong

nhấn button login và đợi loading .... Trong lúc loading... mình đã disabled cái button login đi rồi, nhưng chợt nhận ra user vẫn có thể click sang một số link khác

như forgot-password, create-account, hoặc button login with Facebook vv... được và mong muốn của mình là trong lúc chờ loading... user sẽ không thể click vào bất cứ action nào được.

Ngoài việc làm cái background overlay để đè lên trên thì mình nghĩ ra giải pháp là hãy tìm cách disabled con trỏ chuột trên toàn App, mình đang prefer cách thứ 2 hơn và đang nghiên cứu với tìm trên Google nhưng chưa tìm được giải pháp để làm.

Vì vậy mình đăng bài này mong các bạn cho mình xin giải pháp với. Cám ơn các bạn nhiều, à app của mình có dùng tailwind-css là style các bạn ạ

Avatar Hoang vn @wiliamfeng
Aug 7th, 3:11 AM

À mình thấy trên trang login của Viblo, khi đang thực hiện login và ở trạng thái là loading ... vẫn cho phép người dùng click sang các link hoặc button khác được à các bạn.

Thế không biết yêu cầu bên trên của mình có hợp lý và phù hợp không các bạn nhỉ

0
| Reply
Share

1 ANSWERS


Answered Aug 7th, 9:51 AM
+2

Bạn có thể đặt thuộc tính css "pointer-events: none" vào body hoặc root. Nhưng thường chỉ cần khóa button login đi là đủ, vì người dùng có click đi đâu cũng ko ảnh hưởng request auth đã gửi - họ vẫn sẽ được tự động redirect về trang chủ (hoặc lý tưởng hơn là trang đang truy cập) sau khi login thành công.

Share
Avatar Hoang vn @wiliamfeng
Aug 8th, 12:56 AM

Thực ra yêu cầu đó nó xảy ra chỉ trong suy nghĩ tức thời của mình, sau khi ngẫm lại thì mình thấy nó cũng không cần thiết lắm. Thử dạo qua một số trang lớn thấy họ cũng không bắt buộc phải chặn như vậy.

Còn về cách làm thì chắc đúng như bạn nói, trong component <App /> (component lớn nhất ) mình sẽ dùng biến loading để toggle một class có tên pointer-none sau đó trong css mình sẽ viết style cho class này là được.

Cám ơn banh nhiều nha, thi thoảng đầu óc cứ thích sáng tạo ra mấy cái không đâu đấy nhở 😇

+1
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.