如何使用 onKeyPress (React JS) 激活右键？

Question

My code looks quite complicated so I am showing you screens first. I made a form on different pages with react, and I just have to press "enter" button to have next question. I tried to add this attribute onKeyPress={(e) => e.key === 'Enter'} on "enter" button in order to go to next question when I press "Enter" on my keyboard. Currently, it works to move to the second question but at the second question it activates "return" button and makes me go back to previous question.

How could the function work only for "enter" button ?

import React, { useState } from 'react'
import Gender from './Questions/Gender';
import Firstname from './Questions/Firstname';
import Lastname from './Questions/Lastname';
import Birthdate from './Questions/Birthdate';
import Occupation from './Questions/Occupation';
import City from './Questions/City';
import Nationality from './Questions/Nationality';
import NativeLanguage from './Questions/NativeLanguage';
import PracticedLanguages from './Questions/PracticedLanguages';
import Email from './Questions/Email';
import Password from './Questions/Password';
import PasswordConfirmation from './Questions/PasswordConfirmation';

function FormSubscription() {

    const [page, setPage] = useState(0);
    const [formData, setFormData] = useState({
        gender:"",
        firstname:"",
        lastname:"",
        birthdate:"",
        occupation:"",
        city:"",
        nationality:"",
        nativeLanguage:"",
        practicedLanguages:"",
        email:"",
        password:"",
        confirmPassword:"",
    })

    const PageDisplay = () => {
        if (page === 0) {
            return <Gender formData={formData} setFormData={setFormData} />
        } else if (page === 1) {
            return <Firstname formData={formData} setFormData={setFormData} />
        } else if (page === 2) {
            return <Lastname formData={formData} setFormData={setFormData} />
        } else if (page === 3) {
            return <Birthdate formData={formData} setFormData={setFormData} />
        } else if (page === 4) {
            return <Occupation formData={formData} setFormData={setFormData} />
        } else if (page === 5) {
            return <City formData={formData} setFormData={setFormData} />
        } else if (page === 6) {
            return <Nationality formData={formData} setFormData={setFormData} />
        } else if (page === 7) {
            return <NativeLanguage formData={formData} setFormData={setFormData} />
        } else if (page === 8) {
            return <PracticedLanguages formData={formData} setFormData={setFormData} />
        } else if (page === 9) {
            return <Email formData={formData} setFormData={setFormData} />
        } else if (page === 10) {
            return <Password formData={formData} setFormData={setFormData} />
        } else {
            return <PasswordConfirmation formData={formData} setFormData={setFormData} />}
    }

    let next = false
    if (page === 0 & formData.gender === "") {
        next = true
    } else if (page === 1 & formData.firstname === "") {
        next = true
    } else if (page === 2 & formData.lastname === "") {
        next = true
    } else if (page === 3 & formData.birthdate === "") {
        next = true
    } else if (page === 4 & formData.occupation === "") {
        next = true
    } else if (page === 5 & formData.city === "") {
        next = true
    } else if (page === 6 & formData.nationality === "") {
        next = true
    } else if (page === 7 & formData.nativeLanguage === "") {
        next = true
    } else if (page === 9 & formData.email === "") {
        next = true
    } else if (page === 10 & formData.password === "") {
        next = true
    } else if (page === 11 & formData.confirmPassword === "") {
        next = true
    } else {
        next = false
    }

    const validerForm = (event) => {
        event.preventDefault();
        console.log(event)
    }

  return (
    <div className='form container'>
        <form onSubmit={validerForm}>
            <div className='body'>{PageDisplay()}</div>
            <div className='footer d-flex mt-4'>
                {page !== 0 ? <button
                    onClick={() => {setPage((currentPage) => currentPage - 1)}}>retour</button> : ""}
                <button 
                    className='ms-auto'
                    disabled={next}
                    onKeyPress={(e) => e.key === 'Enter'}
                    onClick={() => {
                        if (page === FormTitles.length - 1) {
                            console.log(formData)
                        } else {
                            setPage((currentPage) => currentPage + 1);
                        }
                    }}
                >
                    {page === FormTitles.length - 1 ? "enregistrer" : "entrer"}
                </button>
            </div>
        </form>
    </div>
  );
}

export default FormSubscription;

Answer 1

Add the listiner to the window object

  useEffect(() => {
    window.addEventListener("keydown", (e) => doSomthing(e))
  })

For example

function Main() {

  function doSomthing(e) {
    //Your action here
    console.log(e)
  }

  useEffect(() => {
    window.addEventListener("keydown", (e) => {
      if (e.key === 'Enter') {
        doSomthing(e)
      }
    })
  })

  return (
    <h1>My component</h1>
  );
}

And your code should look like:

function FormSubscription() {

    const [page, setPage] = useState(0);

    function doSomthing(e) {
        if (page === FormTitles.length - 1) {
            console.log(formData)
        } else {
            setPage((currentPage) => currentPage + 1);
        }    
    }
  
    useEffect(() => {
      window.addEventListener("keydown", (e) => {
        if (e.key === 'Enter') {
          doSomthing(e)
        }
      })
    })

    const [formData, setFormData] = useState({
        gender:"",
        firstname:"",
        lastname:"",
        birthdate:"",
        occupation:"",
        city:"",
        nationality:"",
        nativeLanguage:"",
        practicedLanguages:"",
        email:"",
        password:"",
        confirmPassword:"",
    })

    const PageDisplay = () => {
        if (page === 0) {
            return <Gender formData={formData} setFormData={setFormData} />
        } else if (page === 1) {
            return <Firstname formData={formData} setFormData={setFormData} />
        } else if (page === 2) {
            return <Lastname formData={formData} setFormData={setFormData} />
        } else if (page === 3) {
            return <Birthdate formData={formData} setFormData={setFormData} />
        } else if (page === 4) {
            return <Occupation formData={formData} setFormData={setFormData} />
        } else if (page === 5) {
            return <City formData={formData} setFormData={setFormData} />
        } else if (page === 6) {
            return <Nationality formData={formData} setFormData={setFormData} />
        } else if (page === 7) {
            return <NativeLanguage formData={formData} setFormData={setFormData} />
        } else if (page === 8) {
            return <PracticedLanguages formData={formData} setFormData={setFormData} />
        } else if (page === 9) {
            return <Email formData={formData} setFormData={setFormData} />
        } else if (page === 10) {
            return <Password formData={formData} setFormData={setFormData} />
        } else {
            return <PasswordConfirmation formData={formData} setFormData={setFormData} />}
    }

    let next = false
    if (page === 0 & formData.gender === "") {
        next = true
    } else if (page === 1 & formData.firstname === "") {
        next = true
    } else if (page === 2 & formData.lastname === "") {
        next = true
    } else if (page === 3 & formData.birthdate === "") {
        next = true
    } else if (page === 4 & formData.occupation === "") {
        next = true
    } else if (page === 5 & formData.city === "") {
        next = true
    } else if (page === 6 & formData.nationality === "") {
        next = true
    } else if (page === 7 & formData.nativeLanguage === "") {
        next = true
    } else if (page === 9 & formData.email === "") {
        next = true
    } else if (page === 10 & formData.password === "") {
        next = true
    } else if (page === 11 & formData.confirmPassword === "") {
        next = true
    } else {
        next = false
    }

    const validerForm = (event) => {
        event.preventDefault();
        console.log(event)
    }

  return (
    <div className='form container'>
        <form onSubmit={validerForm}>
            <div className='body'>{PageDisplay()}</div>
            <div className='footer d-flex mt-4'>
                {page !== 0 ? <button
                    onClick={() => {setPage((currentPage) => currentPage - 1)}}>retour</button> : ""}
                <button 
                    className='ms-auto'
                    disabled={next}
                    onClick={doSomething}
                >
                    {page === FormTitles.length - 1 ? "enregistrer" : "entrer"}
                </button>
            </div>
        </form>
    </div>
  );
}

export default FormSubscription;