檢查用戶名、密碼-使用ReactHooks的登錄表單

我想用陣列資料UsersData.js創建一個登錄表單：

const users = [
  {
    username: 'admin1',
    password: '12345678'
  },
  {
    username:'admin2',
    password:'012345678'
  }
];

Login.js 看起來像這樣：

import React, {useState} from 'react';
import { users } from 'UsersData';

  function Login() {
      const [data, setData] = useState({
        username: '',
        password: ''
      });
          
      const {uname, pass} = data;
      const checkUser = () => {
        const usercheck = users.find(user => (user.username === uname && user.password === pass));
        if(usercheck) {
          console.log("Login successful");
        }else {
          console.log("Wrong password or username");
        }
        // console.log(uname);
        console.log(usercheck);
      }

      const changeHandler = (e) => {
        setData({...data, [e.target.name]:[e.target.value]})
      }
      const handleSubmit = (e) => {
        e.preventDefault();
        checkUser();
        console.log(checkUser());
      }

    return (
      <div className="login-bg">
        <div className="card">
          <form className='loginForm'
          onSubmit={handleSubmit}
          >
          <div className="input-text">
              <input
                type="text"
                name="username"
                value={uname}
                placeholder="Username"
                aria-describedby="inputGroupPrepend2" required
                onChange={changeHandler}
              />
          </div>
          <div className="input-text">
            <input
              type="password"
              name="password"
              value={pass}
              placeholder="Password"
              aria-describedby="inputGroupPrepend2" required
              onChange={changeHandler}
            />
            
          </div>
          <div className="buttons">
              <button type="submit" className="btn btn-warning btn-block">
                Login
              </button>
          </div>
        </form>
        </div>
     </div>
    )
  }
export default Login;

So the above code only check whether the username and password fields entered in the form match the name and password of single record in the array of objects of UsersData.js the above code is working fine.I wrote checkUser() function but the result is not true.

Please show an instance of how it is done. Sorry, I'm new to ReactJS so I'm a bit confused, hope you can help. Thanks

uj5u.com熱心網友回復：

你這里的邏輯也不正確這是事件處理的方式

  import { useEffect, useState } from "react";
import "./styles.css";
const users = [
  {
    username: 'admin1',
    password: '12345678'
  },
  {
    username:'admin2',
    password:'012345678'
  }
];
export default function App() {
  const [data, setData] = useState({
    username: '',
    password: ''
  });
  const changeHandler = (e) => {
    setData({...data, [e.target.name]: e.target.value})
  }

  const checkUser = () => {
    const usercheck = users.find(user => (user.username === data.username && user.password === data.password));
    if(usercheck) {
      console.log("Login successful");
    }else {
      console.log("Wrong password or username");
    }
    // console.log(uname);
    console.log(usercheck);
  }


  useEffect(() => {
checkUser(users)
  }, [data.username, data.password])

  console.log(data)
  return (
    <div className="App">
      <div className="input-text">
              <input
                type="text"
                name="username"
                value={data.username}
                placeholder="Username"
                aria-describedby="inputGroupPrepend2" required
                onChange={changeHandler}
              />
          </div>
          <div className="input-text">
            <input
              type="password"
              name="password"
              value={data.password}
              placeholder="Password"
              aria-describedby="inputGroupPrepend2" required
              onChange={changeHandler}
            />
            
          </div>
    </div>
  );
}

uj5u.com熱心網友回復：

嘿，fallha 因此，首先要以您解構的方式為您從資料 obj 中提取的值

讓我知道這是否是您的目標？

const { username, password } = data

我們現在有了用戶名和資料的本地組件狀態

const checkUser = (users) => {
        const usercheck = users.find(user => (user.username === username 
        && user.password === password))
         return usercheck ? console.log('successfully logged in') : 
        console.log('wrong credentials')
 }

然后我們呼叫函式

checkUser(users)

uj5u.com熱心網友回復：

我認為您可以使用 map() 和 some() 來實作該目標。當您檢查其中一個用戶是否在陣列中時，這將生成一個包含 true 和 false 的陣列，例如 [false, false, true] 等。

因此，最直接的解決方案是使用您的輸入值映射用戶，然后通過 some() 檢查身份驗證。

const onCheck = () => {
  const {uname, pass} = data;
  const isAuthenticated = users.map(user => user.username === uname && user.password === pass);

  return isAuthenticated.some();
}


if(onCheck()) {
   console.log("Login successful");
}else {
   console.log("Wrong password or username");
}

標籤：javascript arrays reactjs forms react-hooks

上一篇：在另一個選項中顯示輸入欄位值更改輸入值時選擇選項值

下一篇：如何處理Angular表單驗證中的特殊情況？