Quiero crear un formulario de inicio de sesión con datos de matriz en el archivo User.js (sin ningún backend)
Mi archivo User.js se ve así:
const users = [ { username: 'admin1', password: 'admin1@1' }, { username:'admin2', password:'admin2@2' } ];y mi Login.js se parece a esto:
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;Arriba, no sé cómo verificar el nombre de usuario y la contraseña de la matriz pasada. Por favor, muestre un ejemplo de cómo se hace. Y después de un inicio de sesión exitoso, ¿cómo cambio a otra página? Lo siento, soy nuevo en ReactJS, así que estoy un poco confundido, espero que pueda ayudar.
Importe los datos de user.js después de exportarlos desde allí.
export const UsersData = [ { username: 'admin1', password: 'admin1@1' }, { username:'admin2', password:'admin2@2' } ];//Iniciar sesión.js
importar UsersData desde './user.js'
Ahora realice una operación de matriz en esta matriz de objetos. Ahora puede convertir los datos ingresados por el usuario a un formato similar proporcionado por User.js.
es decir: si el usuario ingresó nombre de usuario = alfabeto, contraseña = 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"); } }Aquí usamos una operación de matriz llamada findIndex que devuelve -1 si no encuentra el objeto en la matriz; de lo contrario, devuelve el índice.
Para saber más sobre la operación de matriz en JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
No estoy seguro si entiendo correctamente su pregunta, pero así es como puede verificar si el usuario y la contraseña del dúo están en su conjunto:
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'));Y aquí está la reproducción en Stackblitz