表單提交后，密碼欄位輸入清空，但電子郵件輸入欄位未清空。
正如您在 HandleSubmit 函式中看到的那樣： ref.current.value = ""; 是我用來在表單提交后清除輸入欄位的嘗試，但它僅適用于密碼輸入欄位。
我已經查看了其他一些關于 SO 的答案，并且嘗試了 e.target.reset()，并且還嘗試了 setField(""); 還沒有運氣。
import React from 'react';
import Form from 'react-bootstrap/Form';
import { Button } from 'react-bootstrap';
import { Container } from 'react-bootstrap';
import { useState } from 'react';
import { useRef } from 'react';
const allThis = () => {
const [form, setForm] = useState({})
const [errors, setErrors] = useState({})
const setField = (field, value) => {
setForm({
...form,
[field]: value
})
// Check and see if errors exist, and remove them from the error object:
if (!!errors[field]) setErrors({
...errors,
[field]: null
})
}
const ref = useRef(null); // set up empty field
const handleSubmit = (e) => {
e.preventDefault();
const newErrors = findFormErrors()
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors)
} else {
alert('Thank you for your feedback!');
ref.current.value = ""; // empty the field
}
}
const findFormErrors = () => {
const { email, password } = form
const newErrors = {};
if (!email || email === '') newErrors.email = 'cannot be blank!';
/* else if (email.length > 30) newErrors.email = 'email is too long!'; */
if (!password || password === " ") newErrors.password = "cannot be blank";
return newErrors
}
return (
<Container>
<Form className="reduceForm">
<Form.Label className="contact">Contact Me</Form.Label>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control input ref={ref} type="email" placeholder="Enter email"
onChange={e => setField('email', e.target.value)}
isInvalid={!!errors.email} />
<Form.Control.Feedback type='invalid'>
{errors.email}
</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control input ref={ref} type="password" placeholder="Password"
onChange={e => setField('password', e.target.value)}
isInvalid={!!errors.password} />
<Form.Control.Feedback type='invalid'>
{errors.password}
</Form.Control.Feedback>
</Form.Group>
<Button onClick={handleSubmit} variant="primary" type="submit">
Submit
</Button>
</Form>
</Container>
)
}
export default allThis
uj5u.com熱心網友回復：
您正在將一個 ref 設定為兩個不同的欄位。因此，只有最后一個被保留，即密碼一個（并且電子郵件欄位的參考被覆寫）為它們使用 2 個不同的參考。如果可能的話，如果 react-bootstrap/form 支持它，請使用 ref 到您的表單。
uj5u.com熱心網友回復：
您必須為電子郵件和密碼宣告不同的變數。我更喜歡只使用 useState。
const [email, setEmail] = useState("");
const [password, setPassword] = useState("")
// Input
<Form.Control input value={email} type="email" placeholder="Enter email"
onChange={e => setEmail(e.target.value}
isInvalid={!!errors.email} />
<Form.Control input value={password} type="password" placeholder="Password"
onChange={e => setPassword(e.target.value}
isInvalid={!!errors.password} />
// handleSubmit
setEmail("");
setPassword("");
uj5u.com熱心網友回復：
React 團隊建議以宣告方式撰寫表單，使用 state 而不是 refs。您已經將輸入設定為更改時的狀態，因此您可以通過將值道具傳遞給輸入來以更易于維護的方式解決此問題。
import React from 'react';
import Form from 'react-bootstrap/Form';
import { Button } from 'react-bootstrap';
import { Container } from 'react-bootstrap';
import { useState } from 'react';
const initialForm = {
email: '',
password: ''
};
export default function AllThis() {
const [form, setForm] = useState(initialForm);
const [errors, setErrors] = useState({});
const setField = (field, value) => {
setForm({
...form,
[field]: value
});
// Check and see if errors exist, and remove them from the error object:
if (!!errors[field])
setErrors({
...errors,
[field]: null
});
};
const handleSubmit = e => {
e.preventDefault();
const newErrors = findFormErrors();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
alert('Thank you for your feedback!');
setForm(initialForm);
}
};
const findFormErrors = () => {
const { email, password } = form;
const newErrors = {};
if (!email || email === '') newErrors.email = 'cannot be blank!';
/* else if (email.length > 30) newErrors.email = 'email is too long!'; */
if (!password || password === ' ') newErrors.password = 'cannot be blank';
return newErrors;
};
return (
<Container>
<Form className="reduceForm">
<Form.Label className="contact">Contact Me</Form.Label>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
input
type="email"
placeholder="Enter email"
value={form.email}
onChange={e => setField('email', e.target.value)}
isInvalid={!!errors.email}
/>
<Form.Control.Feedback type="invalid">
{errors.email}
</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
input
type="password"
placeholder="Password"
value={form.password}
onChange={e => setField('password', e.target.value)}
isInvalid={!!errors.password}
/>
<Form.Control.Feedback type="invalid">
{errors.password}
</Form.Control.Feedback>
</Form.Group>
<Button onClick={handleSubmit} variant="primary" type="submit">
Submit
</Button>
</Form>
</Container>
);
}
https://codesandbox.io/s/react-clearing-email-input-field-after-form-submission-o41dki?file=/src/AllThis.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/497722.html
標籤：javascript 反应 形式