我寫了代碼，它有一個單獨的腳本檔案，但是當我點擊按鈕時next，before不起作用nextPrev，我已經把所有的JS代碼都放入了useEffect，我不知道這個方法是否正確
顯示錯誤：
Line 174:57: 'nextPrev' is not defined no-undef
Line 175: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)
}
const 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">Setting</span>
<span className="stepIndicator">Question</span>
<span className="stepIndicator">Des</span>
<span className="stepIndicator">View</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">Sport</label>
<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" nClick={nextPrev(-1)}>Before</button>
<button type="button" id="nextBtn" nClick={nextPrev(1)}>Next</button>
</div>
</form>
</div>
</>
);
};
export default AddTest;
uj5u.com熱心網友回復：
Type error:
change this:
<div className="form-footer d-flex">
<button type="button" id="prevBtn" nClick={nextPrev(-1)}>Before</button>
<button type="button" id="nextBtn" nClick={nextPrev(1)}>Next</button>
</div>
to:
<div className="form-footer d-flex">
<button type="button" id="prevBtn" onClick={nextPrev(-1)}>Before</button>
<button type="button" id="nextBtn" onClick={nextPrev(1)}>Next</button>
</div>
uj5u.com熱心網友回復：
如果你把你methods的useEffect鉤子，它會在里面，你不能在里面呼叫它DOM，你需要把它放在外面，然后把它變成currentTab一個狀態并將它設定為對useEffect
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)
}
const 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(prev => prev 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
}, [currentTab])
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">Setting</span>
<span className="stepIndicator">Question</span>
<span className="stepIndicator">Des</span>
<span className="stepIndicator">View</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">Sport</label>
<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" nClick={nextPrev(-1)}>Before</button>
<button type="button" id="nextBtn" nClick={nextPrev(1)}>Next</button>
</div>
</form>
</div>
</>
);
};
export default AddTest;
uj5u.com熱心網友回復：
你的語法確實有一些錯誤
例如：
<div className="mb-3">
<input type="text" placeholder="Full name" oninput="this.className = ''" name="fullname" />
</div>
oninput在反應應該是onInput
按鈕也沒有活動的 onclick 功能。
您錯過了o按鈕onClick上的輸入，并且您正在積極呼叫該功能。
他們應該是這樣的：
<div className="form-footer d-flex">
<button type="button" id="prevBtn" nClick={()=>nextPrev(-1)}>Before</button>
<button type="button" id="nextBtn" nClick={()=>nextPrev(1)}>Next</button>
</div>
您也在 useEffect 中呼叫該函式，這就是它不讀取它的原因。將其移到 useEffect 之外
這是完整的代碼修復：
const AddTest = () => {
const 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)
}
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 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">Setting</span>
<span className="stepIndicator">Question</span>
<span className="stepIndicator">Des</span>
<span className="stepIndicator">View</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 htmlFor="company_name" className="font-weight-bold text-right">Sport</label>
<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" htmlFor="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" htmlFor="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" nClick={nextPrev(-1)}>Before</button>
<button type="button" id="nextBtn" nClick={nextPrev(1)}>Next</button>
</div>
</form>
</div>
</>
);
};
export default AddTest;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/508314.html
標籤：javascript 反应 反应钩子
下一篇：與互聯網斷開連接時隱藏模式