在 Reactjs 中登錄失敗時如何顯示錯誤訊息。我想顯示警告訊息“無效的用戶名或密碼，請重試。” 當用戶在頁面上登錄失敗時。我怎樣才能在 Reactjs 中做到這一點？
代碼：
login.js
export default function LogIn() {
let history = useHistory();
const initialFormData = Object.freeze({
username: '',
password: '',
});
const [formData, updateFormData] = useState(initialFormData);
const handleChange = (e) => {
updateFormData({
...formData,
[e.target.name]: e.target.value.trim(),
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
axiosInstance
.post(`token/`, {
username: formData.username,
password: formData.password,
})
.then((res) => {
localStorage.setItem('access_token', res.data.access);
localStorage.setItem('refresh_token', res.data.refresh);
axiosInstance.defaults.headers['Authorization'] =
'JWT ' localStorage.getItem('access_token');
history.push("/home");
});
};
return (
<Box component="form" onSubmit={handleSubmit} noValidate>
<TextField
margin="normal"
required
id="username"
label="username"
name="username"
autoComplete="username"
autoFocus
onChange={handleChange}/>
<TextField
margin="normal"
required
name="password"
label="password"
type="password"
id="password"
autoComplete="current-password"
onChange={handleChange}/>
<Button type="submit" onClick={handleSubmit}>
LOG IN
</Button>
</Box>
);}
先感謝您。
uj5u.com熱心網友回復：
你可以在 javascript 中使用 alert 來顯示一個對話框，你也可以使用這個Pakage
向用戶顯示警報或訊息
您可以使用此代碼在狀態中設定錯誤并在標簽中顯示
const [error,setError]=useState();
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
axiosInstance
.post(`token/`, {
username: formData.username,
password: formData.password,
})
.then((res) => {
localStorage.setItem('access_token', res.data.access);
localStorage.setItem('refresh_token', res.data.refresh);
axiosInstance.defaults.headers['Authorization'] =
'JWT ' localStorage.getItem('access_token');
history.push("/home");
}, reason => {
console.error(reason); // Error!
setError('Invalid Username or Password')
});
};
return (
<Box component="form" onSubmit={handleSubmit} noValidate>
<TextField
margin="normal"
required
id="username"
label="username"
name="username"
autoComplete="username"
autoFocus
onChange={handleChange}/>
<TextField
margin="normal"
required
name="password"
label="password"
type="password"
id="password"
autoComplete="current-password"
onChange={handleChange}/>
<Button type="submit" onClick={handleSubmit}>
LOG IN
</Button>
{error?<Label>{error}</Label>:null}
</Box>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/447304.html
上一篇：從數字輸入和驗證中洗掉負值