Yêu cầu thg 8 7, 2021 3:06 SA 200 0 1
  • 200 0 1
0

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

Chia sẻ
  • 200 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
thg 8 7, 2021 3:11 SA

À 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ỉ

1 CÂU TRẢ LỜI


Đã trả lời thg 8 7, 2021 9:51 SA
+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.

Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 8 8, 2021 12:56 SA

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ở 😇

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí