[英]How activate the right button with onKeyPress (React JS)?
我的代碼看起來很復雜,所以我先向您展示屏幕。 我用反應在不同的頁面上制作了一個表格,我只需要按“輸入”按鈕就有下一個問題。 我嘗試在“輸入”按鈕上添加此屬性onKeyPress={(e) => e.key === 'Enter'} ,以便在我按鍵盤上的“輸入”時轉到下一個問題。 目前,它可以轉到第二個問題,但在第二個問題上它會激活“返回”按鈕並讓我回到上一個問題。
該功能如何僅適用於“輸入”按鈕?
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;
將監聽器添加到窗口對象
useEffect(() => {
window.addEventListener("keydown", (e) => doSomthing(e))
})
例如
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>
);
}
您的代碼應如下所示:
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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.