Advertisement
Guest User

Untitled

a guest
Mar 31st, 2022
32
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.07 KB | None | 0 0
  1. import { useState, useEffect } from 'react';
  2.  
  3. const HandleKeypress = () => {
  4.  
  5. const [itWorks, setItWorks] = useState(false)
  6. const [gender, setGender] = useState("");
  7.  
  8. useEffect(() => {
  9. document.addEventListener('keyup', (e) => {
  10. e.preventDefault();
  11. const {name, value, type} =e.target as HTMLInputElement;
  12. if ((e.code == 'Enter' || e.code =="Tab") && name=="gender"){
  13. if(type=="radio"){
  14. setGender(value)
  15. }
  16. setItWorks(true)
  17. }
  18. })
  19. }, [])
  20.  
  21. return (
  22. <div>
  23. <p>{itWorks ? 'It works!' : 'It does not'}</p>
  24. <button onClick={() => setItWorks(!itWorks)} >Press me</button>
  25.  
  26. <input type='radio' name='gender' value="Male" checked={gender=="Male"} onKeyUp={() => HandleKeypress } />
  27. <input type='radio' name='gender' value="Female" checked={gender=="Female"} onKeyUp={() => HandleKeypress } />
  28.  
  29. </div>
  30. )
  31. }
  32.  
  33. export default HandleKeypress;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement