[英]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.