ReactJS：帶有用戶陣列的登錄表單

我想在 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的新手，所以我有點困惑，希望你能幫助。

uj5u.com熱心網友回復：

從 user.js 匯出資料后，從那里匯入資料。

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

//登錄.js

從 './user.js' 匯入用戶資料

現在對這個物件陣列進行陣列操作。現在您可以將用戶輸入的資料轉換為 User.js 提供的類似格式。

即：如果用戶輸入的用戶名=alphabet，密碼=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

uj5u.com熱心網友回復：

不確定我是否正確理解您的問題，但您可以通過以下方式檢查 duo 用戶和密碼是否在您的陣列中：

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'));

這是Stackblitz 的復制品

標籤：javascript 反应

上一篇：我的Chart.js餅圖不作業

下一篇：WPFTabControl系結不允許我更新選項卡資料