如何阅读 function 外部 useEffect in react | 不工作 onclick 按钮
[英]how to read function outside useEffect in react | not working onclick button
问题描述
I wrote the Code and it has a separate script file, but when I click on the button next or before, the nextPrev does not work, I have put all the JS codes into the useEffect and I don't know if this method is correct or not
我写了Code，它有一个单独的脚本文件，但是当我点击next或before按钮时，nextPrev不起作用，我已经把所有的JS代码都放到了useEffect中，不知道这个方法是否正确或不
i can't read function inside in useEffect and show me this error: Line 174:57: 'nextPrev' is not defined no-undef我无法在 useEffect 中读取useEffect我显示此错误： Line 174:57: 'nextPrev' is not defined no-undef
const AddTest = () => {
useEffect(()=>{
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("step");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("step");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("signUpForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("step");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("stepIndicator")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("stepIndicator");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
},[])
return (
<>
<div className="row">
<p>njjj</p>
<form id="signUpForm" className="md-12" action="#!">
<div className="form-header d-flex mb-4">
<span className="stepIndicator">تنظیمات</span>
<span className="stepIndicator">سوالات</span>
<span className="stepIndicator">تفسیر</span>
<span className="stepIndicator">پیش نمایش</span>
</div>
<div className="step">
<p className="text-center mb-4">Create your account</p>
<div className="form-row">
<div className="col-md-6 mb-3">
<input type="text" className="form-control" id="validationCustom01" placeholder="First name" required />
</div>
<div className="col-md-6 mb-3">
<input type="text" className="form-control" id="validationCustom02" placeholder="Last name" required />
</div>
</div>
<div className="form-row">
<div className="col-md-12 mb-3">
<textarea className="form-control"></textarea>
</div>
</div>
<div className="form-row">
<div className="col-md-12 mb-3">
<input type="text" className="form-control" id="validationCustom01" placeholder="First name" required />
</div>
</div>
<div className="form-group">
<label for="company_name" className="font-weight-bold text-right">درصد افیلیت</label>
<p className="text-muted">درصدی از هزینه تست که میخواهید به پزشک یا نمایندگان اختصاص داده شود را تعیین کنید.</p>
<div className="form-row">
<div className="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" className="custom-control-input" />
<label className="custom-control-label" for="customRadioInline1">5 درصد</label>
</div>
<div className="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" className="custom-control-input" />
<label className="custom-control-label" for="customRadioInline2">10 درصد</label>
</div>
</div>
</div>
</div>
<div className="step">
<p className="text-center mb-4">Create your account</p>
<div className="mb-3">
<input type="email" placeholder="Email Address" oninput="this.className = ''" name="email" />
</div>
<div className="mb-3">
<input type="password" placeholder="Password" oninput="this.className = ''" name="password" />
</div>
<div className="mb-3">
<input type="password" placeholder="Confirm Password" oninput="this.className = ''" name="password" />
</div>
</div>
<div className="step">
<p className="text-center mb-4">Your presence on the social network</p>
<div className="mb-3">
<input type="text" placeholder="Linked In" oninput="this.className = ''" name="linkedin" />
</div>
<div className="mb-3">
<input type="text" placeholder="Twitter" oninput="this.className = ''" name="twitter" />
</div>
<div className="mb-3">
<input type="text" placeholder="Facebook" oninput="this.className = ''" name="facebook" />
</div>
</div>
<div className="step">
<p className="text-center mb-4">We will never sell it</p>
<div className="mb-3">
<input type="text" placeholder="Full name" oninput="this.className = ''" name="fullname" />
</div>
<div className="mb-3">
<input type="text" placeholder="Mobile" oninput="this.className = ''" name="mobile" />
</div>
<div className="mb-3">
<input type="text" placeholder="Address" oninput="this.className = ''" name="address" />
</div>
</div>
<div className="form-footer d-flex">
<button type="button" id="prevBtn" onClick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onClick="nextPrev(1)">Next</button>
</div>
</form>
</div>
</>
);
};
export default AddTest;
4 个解决方案
解决方案1
0 2022-09-15 17:59:28
const AddTest = () => {
const [currentTab, setCurrentTab] = React.useState(0);
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i,
x = document.getElementsByClassName("stepIndicator");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("step");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == x.length - 1) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n);
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("step");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
setCurrentTab((curTab) => curTab + n);
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("signUpForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x,
y,
i,
valid = true;
x = document.getElementsByClassName("step");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("stepIndicator")[currentTab].className +=
" finish";
}
return valid; // return the valid status
}
useEffect(() => {
showTab(currentTab); // Display the current tab
}, []);
return (
<>
<div className="row">
<p>njjj</p>
<form id="signUpForm" className="md-12" action="#!">
<div className="form-header d-flex mb-4">
<span className="stepIndicator">تنظیمات</span>
<span className="stepIndicator">سوالات</span>
<span className="stepIndicator">تفسیر</span>
<span className="stepIndicator">پیش نمایش</span>
</div>
<div className="step">
<p className="text-center mb-4">Create your account</p>
<div className="form-row">
<div className="col-md-6 mb-3">
<input
type="text"
className="form-control"
id="validationCustom01"
placeholder="First name"
required
/>
</div>
<div className="col-md-6 mb-3">
<input
type="text"
className="form-control"
id="validationCustom02"
placeholder="Last name"
required
/>
</div>
</div>
<div className="form-row">
<div className="col-md-12 mb-3">
<textarea className="form-control"></textarea>
</div>
</div>
<div className="form-row">
<div className="col-md-12 mb-3">
<input
type="text"
className="form-control"
id="validationCustom01"
placeholder="First name"
required
/>
</div>
</div>
<div className="form-group">
<label for="company_name" className="font-weight-bold text-right">
درصد افیلیت
</label>
<p className="text-muted">
درصدی از هزینه تست که میخواهید به پزشک یا نمایندگان اختصاص داده
شود را تعیین کنید.
</p>
<div className="form-row">
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
id="customRadioInline1"
name="customRadioInline1"
className="custom-control-input"
/>
<label
className="custom-control-label"
for="customRadioInline1"
>
5 درصد
</label>
</div>
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
id="customRadioInline2"
name="customRadioInline1"
className="custom-control-input"
/>
<label
className="custom-control-label"
for="customRadioInline2"
>
10 درصد
</label>
</div>
</div>
</div>
</div>
<div className="step">
<p className="text-center mb-4">Create your account</p>
<div className="mb-3">
<input
type="email"
placeholder="Email Address"
oninput="this.className = ''"
name="email"
/>
</div>
<div className="mb-3">
<input
type="password"
placeholder="Password"
oninput="this.className = ''"
name="password"
/>
</div>
<div className="mb-3">
<input
type="password"
placeholder="Confirm Password"
oninput="this.className = ''"
name="password"
/>
</div>
</div>
<div className="step">
<p className="text-center mb-4">
Your presence on the social network
</p>
<div className="mb-3">
<input
type="text"
placeholder="Linked In"
oninput="this.className = ''"
name="linkedin"
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Twitter"
oninput="this.className = ''"
name="twitter"
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Facebook"
oninput="this.className = ''"
name="facebook"
/>
</div>
</div>
<div className="step">
<p className="text-center mb-4">We will never sell it</p>
<div className="mb-3">
<input
type="text"
placeholder="Full name"
oninput="this.className = ''"
name="fullname"
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Mobile"
oninput="this.className = ''"
name="mobile"
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Address"
oninput="this.className = ''"
name="address"
/>
</div>
</div>
<div className="form-footer d-flex">
<button type="button" id="prevBtn" onClick={() => nextPrev(-1)}>
Previous
</button>
<button type="button" id="nextBtn" onClick={() => nextPrev(1)}>
Next
</button>
</div>
</form>
</div>
</>
);
};
export default AddTest;
解决方案2
0 2022-09-15 18:00:24
Try this, I set currentTab as a state so I think you don't need to worry about useEffect:试试这个，我将currentTab设置为 state 所以我认为你不必担心 useEffect：
import { useState } from "react";
const AddTest = () => {
const [currentTab, setCurrentTab] = useState(0);
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("step");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == x.length - 1) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n);
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("step");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
setCurrentTab(currentTab + n);
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("signUpForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x,
y,
i,
valid = true;
x = document.getElementsByClassName("step");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("stepIndicator")[currentTab].className +=
" finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i,
x = document.getElementsByClassName("stepIndicator");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
useEffect(() => {
showTab(currentTab); // Display the current tab
}, []);
return (
<>
<div className="row">
<p>njjj</p>
<form id="signUpForm" className="md-12" action="#!">
<div className="form-header d-flex mb-4">
<span className="stepIndicator">تنظیمات</span>
<span className="stepIndicator">سوالات</span>
<span className="stepIndicator">تفسیر</span>
<span className="stepIndicator">پیش نمایش</span>
</div>
<div className="step">
<p className="text-center mb-4">Create your account</p>
<div className="form-row">
<div className="col-md-6 mb-3">
<input
type="text"
className="form-control"
id="validationCustom01"
placeholder="First name"
required
/>
</div>
<div className="col-md-6 mb-3">
<input
type="text"
className="form-control"
id="validationCustom02"
placeholder="Last name"
required
/>
</div>
</div>
<div className="form-row">
<div className="col-md-12 mb-3">
<textarea className="form-control"></textarea>
</div>
</div>
<div className="form-row">
<div className="col-md-12 mb-3">
<input
type="text"
className="form-control"
id="validationCustom01"
placeholder="First name"
required
/>
</div>
</div>
<div className="form-group">
<label for="company_name" className="font-weight-bold text-right">
درصد افیلیت
</label>
<p className="text-muted">
درصدی از هزینه تست که میخواهید به پزشک یا نمایندگان اختصاص داده
شود را تعیین کنید.
</p>
<div className="form-row">
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
id="customRadioInline1"
name="customRadioInline1"
className="custom-control-input"
/>
<label
className="custom-control-label"
for="customRadioInline1"
>
5 درصد
</label>
</div>
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
id="customRadioInline2"
name="customRadioInline1"
className="custom-control-input"
/>
<label
className="custom-control-label"
for="customRadioInline2"
>
10 درصد
</label>
</div>
</div>
</div>
</div>
<div className="step">
<p className="text-center mb-4">Create your account</p>
<div className="mb-3">
<input
type="email"
placeholder="Email Address"
oninput="this.className = ''"
name="email"
/>
</div>
<div className="mb-3">
<input
type="password"
placeholder="Password"
oninput="this.className = ''"
name="password"
/>
</div>
<div className="mb-3">
<input
type="password"
placeholder="Confirm Password"
oninput="this.className = ''"
name="password"
/>
</div>
</div>
<div className="step">
<p className="text-center mb-4">
Your presence on the social network
</p>
<div className="mb-3">
<input
type="text"
placeholder="Linked In"
oninput="this.className = ''"
name="linkedin"
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Twitter"
oninput="this.className = ''"
name="twitter"
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Facebook"
oninput="this.className = ''"
name="facebook"
/>
</div>
</div>
<div className="step">
<p className="text-center mb-4">We will never sell it</p>
<div className="mb-3">
<input
type="text"
placeholder="Full name"
oninput="this.className = ''"
name="fullname"
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Mobile"
oninput="this.className = ''"
name="mobile"
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Address"
oninput="this.className = ''"
name="address"
/>
</div>
</div>
<div className="form-footer d-flex">
<button type="button" id="prevBtn" onclick={() => nextPrev(-1)}>
Previous
</button>
<button type="button" id="nextBtn" onclick={() => nextPrev(1)}>
Next
</button>
</div>
</form>
</div>
</>
);
};
export default AddTest;
解决方案3
0 2022-09-15 18:06:59
I created this CodeSandBox to guide you in the react way.我创建了这个 CodeSandBox 来指导您做出反应。 I only added handling the next and prev steps.我只添加了处理下一个和上一个步骤。 https://codesandbox.io/s/keen-feather-cr801y?file=/src/App.js https://codesandbox.io/s/keen-feather-cr801y?file=/src/App.js
It's better to read about form handling: https://www.w3schools.com/react/react_forms.asp https://ibaslogic.com/simple-guide-to-react-form/最好阅读有关表单处理的信息： https://www.w3schools.com/react/react_forms.asp https://ibaslogic.com/simple-guide-to-react-form/
Or you can use a package like formik to help.或者您可以使用像 formik 这样的package来提供帮助。
解决方案4
0 已采纳 2022-09-15 18:57:58
Respectfully, your code is quite confusing the read.尊敬的，你的代码读起来很混乱。 If you are using React, then use React, Someone else provided you with a Code Sandbox, but here is yet another .如果您使用的是 React，请使用 React，其他人为您提供了代码沙箱，但这里还有一个.
Pay attention at how, with React, you have no need to use document.getElementById , etc. If you need a reference to a DOMElement, then use useRef (eg <div ref={ ref }... /> , accessible via ref.current ).注意如何使用 React，您无需使用document.getElementById等。如果您需要对 DOMElement 的引用，请使用useRef （例如<div ref={ ref }... /> ，可通过ref.current访问. ref.current ）。
import { useState } from "react";
import classnames from "classnames";
const DEFAULT_FORM_DATA = {
firstName: "",
lastName: "",
notes: "",
radioValue: 0, // ????
email: "",
password: "",
passwordConfirm: "",
address: "",
mobile: "",
linkedin: "",
twitter: "",
facebook: ""
};
const AddTest = () => {
// Current tab is set to be the first tab (0)
const [currentTab, setCurrentTab] = useState(0);
const [formData, setFormData] = useState(DEFAULT_FORM_DATA);
const [formValid, setFormValid] = useState({});
const handleInputChange = (e) => {
const key = e.target.name;
const value = e.target.value;
const valid = value !== "";
setFormValid((formValid) => ({ ...formValid, [key]: valid }));
setFormData((formData) => ({ ...formData, [key]: value }));
};
const handlePreviousTab = () =>
setCurrentTab((currentTab) => Math.max(currentTab - 1, 0));
const handleNextTab = () =>
setCurrentTab((currentTab) => Math.min(currentTab + 1, 3));
const handleSubmit = () => {
console.log("TODO : submit formData = ", formData);
};
return (
<>
<div className="row">
<p>njjj</p>
<form id="signUpForm" className="md-12" action="#!">
<div className="form-header d-flex mb-4">
<span
className={classnames("stepIndicator", {
active: currentTab === 0
})}
>
تنظیمات
</span>
<span
className={classnames("stepIndicator", {
active: currentTab === 1
})}
>
سوالات
</span>
<span
className={classnames("stepIndicator", {
active: currentTab === 2
})}
>
تفسیر
</span>
<span
className={classnames("stepIndicator", {
active: currentTab === 3
})}
>
پیش نمایش
</span>
</div>
<div
className="step"
style={{ display: currentTab === 0 ? "" : "none" }}
>
<p className="text-center mb-4">Create your account</p>
<div className="form-row">
<div className="col-md-6 mb-3">
<input
type="text"
className={classnames("form-control", {
invalid: formValid.firstName === false
})}
name="firstName"
placeholder="First name"
required
value={formData.firstName}
onChange={handleInputChange}
/>
</div>
<div className="col-md-6 mb-3">
<input
type="text"
className={classnames("form-control", {
invalid: formValid.lastName === false
})}
name="lastName"
placeholder="Last name"
required
value={formData.lastName}
onChange={handleInputChange}
/>
</div>
</div>
<div className="form-row">
<div className="col-md-12 mb-3">
<textarea
className="form-control"
name="notes"
value={formData.notes}
onChange={handleInputChange}
></textarea>
</div>
</div>
<div className="form-row">
<div className="col-md-12 mb-3">
<input
type="text"
className={classnames("form-control", {
invalid: formValid.firstName === false
})}
name="firstName"
placeholder="First name"
required
value={formData.firstName}
onChange={handleInputChange}
/>
</div>
</div>
<div className="form-group">
<label
htmlFor="company_name"
className="font-weight-bold text-right"
>
درصد افیلیت
</label>
<p className="text-muted">
درصدی از هزینه تست که میخواهید به پزشک یا نمایندگان اختصاص داده
شود را تعیین کنید.
</p>
<div className="form-row">
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
name="radioValue"
className="custom-control-input"
value={5}
checked={formData.radioValue === "5"}
onChange={handleInputChange}
/>
<label
className="custom-control-label"
htmlFor="customRadioInline1"
>
5 درصد
</label>
</div>
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
name="radioValue"
className="custom-control-input"
value={10}
checked={formData.radioValue === "10"}
onChange={handleInputChange}
/>
<label
className="custom-control-label"
htmlFor="customRadioInline2"
>
10 درصد
</label>
</div>
</div>
</div>
</div>
<div
className="step"
style={{ display: currentTab === 1 ? "" : "none" }}
>
<p className="text-center mb-4">Create your account</p>
<div className="mb-3">
<input
type="email"
placeholder="Email Address"
onInput={(e) => (e.target.className = "")}
name="email"
value={formData.email}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<input
type="password"
placeholder="Password"
onInput={(e) => (e.target.className = "")}
name="password"
value={formData.password}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<input
type="password"
placeholder="Confirm Password"
onInput={(e) => (e.target.className = "")}
name="passwordConfirm"
value={formData.passwordConfirm}
onChange={handleInputChange}
/>
</div>
</div>
<div
className="step"
style={{ display: currentTab === 2 ? "" : "none" }}
>
<p className="text-center mb-4">
Your presence on the social network
</p>
<div className="mb-3">
<input
type="text"
placeholder="Linked In"
onInput={(e) => (e.target.className = "")}
name="linkedin"
value={formData.linkedin}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Twitter"
onInput={(e) => (e.target.className = "")}
name="twitter"
value={formData.twitter}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Facebook"
onInput={(e) => (e.target.className = "")}
name="facebook"
value={formData.facebook}
onChange={handleInputChange}
/>
</div>
</div>
<div
className="step"
style={{ display: currentTab === 3 ? "" : "none" }}
>
<p className="text-center mb-4">We will never sell it</p>
<div className="mb-3">
<input
type="text"
placeholder="Full name"
onInput={(e) => (e.target.className = "")}
name="fullname"
value={formData.fullname}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Mobile"
onInput={(e) => (e.target.className = "")}
name="mobile"
value={formData.mobile}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<input
type="text"
placeholder="Address"
onInput={(e) => (e.target.className = "")}
name="address"
value={formData.address}
onChange={handleInputChange}
/>
</div>
</div>
<div className="form-footer d-flex">
<button
type="button"
id="prevBtn"
onClick={handlePreviousTab}
style={{ display: currentTab > 0 ? "" : "none" }}
>
Previous
</button>
<button
type="button"
id="nextBtn"
onClick={currentTab === 3 ? handleSubmit : handleNextTab}
>
{currentTab === 3 ? "Submit" : "Next"}
</button>
</div>
</form>
</div>
</>
);
};
export default AddTest;
Consider watching or reading some tutorials on using React, and then try to adopt best practices when using the framework.考虑观看或阅读一些使用 React 的教程，然后在使用框架时尝试采用最佳实践。 This will not only make your code easier to read for others, it will help you actually use the framework how it is intended.这不仅会让你的代码更容易被其他人阅读，它会帮助你真正按照预期的方式使用框架。
Note笔记
The "next" button may become a submit button if you want to submit the form through the browser instead of manually handling it.如果您想通过浏览器提交表单而不是手动处理它，“下一步”按钮可能会变成提交按钮。 If this is the intention, you could change the button with如果这是意图，您可以更改按钮
<button
type={ currentTab === 3 ? "submit", : "button" }
id="nextBtn"
onClick={currentTab === 3 ? null : handleNextTab}
>
{currentTab === 3 ? "Submit" : "Next"}
</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何防止 state 对反应 onClick function （外部 useEffect）的更新？ - How to prevent a state update on a react onClick function (outside useEffect)?
按钮上的 React onClick function 不起作用 - React onClick function on button is not working
反应组件功能不起作用onClick按钮 - React Component Function not working onClick button
如何在其外部的 useEffect() 中调用 function - How to call a function in useEffect() outside of it
反应：onClick按钮不起作用 - React: onClick on button not working
如何声明在onclick函数之外已单击按钮 - How to declare that a button has been clicked outside the onclick function
React中的onClick函数不起作用？ - onClick function in React not working?
React 问题：如何使 useEffect 中的变量在 useEffect 之外接收？ - React question: how to make the variable in useEffect to be received outside of useEffect?
反应钩子 - onClick 和 useEffect - React hooks - onClick and useEffect
从按钮onclick调用函数不起作用反应js - Calling function from button onclick not working react js
相关标签