我想用陣列資料創建一個登錄表單：
const users = [
{
username: 'admin1',
password: '12345678'
},
{
username:'admin2',
password:'012345678'
}
];
Login.js 看起來像這樣：
import React from 'react';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: "",
password: ""
};
}
changeInputValue(e) {
this.setState({
[e.target.name]: e.target.value
});
}
validationForm() {
let returnData = {
error : false,
msg: ''
}
const {password} = this.state
//Check password
if(password.length < 8) {
returnData = {
error: true,
msg: 'Password must be more than 8 characters'
}
}
return returnData;
}
submitForm(e) {
e.preventDefault();
const validation = this.validationForm()
var username = e.target.elements.username.value;
var password = e.target.elements.password.value;
if (validation.error) {
alert(validation.msg)
}else if(username === 'admin1' && password === '12345678') {
alert("Login successful");
}else {
alert("Wrong password or username");
}
}
render() {
return (
<div className="container" style={{ paddingTop: "5%" }}>
<form
onSubmit={e => {
this.submitForm(e);
}}
>
<div className="form-group">
<input
type="text"
className="form-control"
name="username"
placeholder="Username"
onChange={e => this.changeInputValue(e)}
/>
</div>
<div className="form-group">
<input
type="password"
className="form-control"
name="password"
placeholder="Password"
onChange={e => this.changeInputValue(e)}
/>
</div>
<button value="submit" className="btn btn-primary" onClick={this.postDetails}>
Submit
</button>
</form>
</div>
);
}
}
export default Login;
所以上面的代碼只檢查表單中輸入的用戶名和密碼欄位是否與User.js物件陣列中單個記錄的名稱和密碼匹配上面的代碼作業正常。我不知道如何從傳遞的陣列中檢查用戶名和密碼。
我想使用 map() 來檢查用戶名和密碼。請舉例說明它是如何完成的。對不起，我是 ReactJS 的新手，所以我有點困惑，希望你能提供幫助。謝謝
uj5u.com熱心網友回復：
您可以使用查找
const user = users.find(user => (user.username === username && user.password === password))
if(user){
//correct user
}
if(!user) {
//incorrect
}
uj5u.com熱心網友回復：
你可以使用.some()方法。
檔案：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
像這樣的東西
var username = e.target.elements.username.value;
var password = e.target.elements.password.value;
if(users.some((elem) => elem.username === username && elem.password === password)) {
// when authentication is valid
} else {
// not a valid username / password
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/443226.html
標籤：javascript 数组 反应 验证 javascript 对象