ReactJS:带有用户数组的登录表单

Question

我想用User.js文件中的数组数据创建一个登录表单(没有任何后端(

我的User.js文件如下：

const users = [
{
username: 'admin1',
password: 'admin1@1'
},
{
username:'admin2',
password:'admin2@2'
}
];

我的Login.js看起来像这样：

import React, { Component, Fragment } 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 === 'admin2' && password === 'admin1@1') {
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;

上面，我不知道如何从传递的数组中检查用户名和密码。请展示一个如何完成的例子。成功登录后，如何切换到另一个页面？对不起，我是ReactJS的新手，所以我有点困惑，希望你能帮忙。

Answer 1

从user.js导出数据后，从那里导入数据。

export const UsersData = [
{
username: 'admin1',
password: 'admin1@1'
},
{
username:'admin2',
password:'admin2@2'
}
];

//Login.js

从"导入UsersData/user.js的

现在对这个对象数组执行数组操作。现在，您可以将用户输入的数据转换为user.js.提供的类似格式

即：如果用户输入的用户名=alphabeta，密码=1234

submitForm(e) {
e.preventDefault();
const validation = this.validationForm()
var inputData = {
username : e.target.elements.username.value,
password : e.target.elements.password.value
};
if (validation.error) {
alert(validation.msg)
}else if(UsersData.findIndex(inputData)!==-1) {
alert("Login successful");
}else {
alert("Wrong password or username");
}
}

这里我们使用一个名为findIndex的数组操作，如果它在数组中找不到对象，它将返回-1，否则它将返回索引。

要了解更多关于JS中数组操作的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

Answer 2

不确定我是否正确理解您的问题，但以下是如何检查两个用户和密码是否在您的数组中：

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
const App = () => {
const users = [
{
username: "admin1",
password: "admin1@1",
},
{
username: "admin2",
password: "admin2@2",
},
];
const handleSubmit = (e) => {
e.preventDefault();

const toCompare = {
username: e.target.elements.username.value,
password: e.target.elements.password.value,
};

// Or just compare properties  
if (users.some(u => JSON.stringify(u) === JSON.stringify(toCompare))) {
console.log('User exists in array');
} else {
console.log('User does not exist in array');
}
};

return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="username" name="username" />
<input type="text" placeholder="password" name="password" />
<button type="submit">Send</button>
</form>
);
};
render(<App />, document.getElementById('root'));

这是Stacklitz 上的repro