从 React 中的输入字段将数据存储在数组中

Question

我想将登录表单中的数据存储在现有数组中。

这是我要存储数据的地方。

const usersAccount = [
    {
      username: "user1",
      password: "pass1"
    }
  ];

这是在提交表单时调用的函数

  // check user when try to register
  const registerUser = (event) => {
    event.preventDefault();

    var { uname, pass } = document.forms[0];
    const username = uname.value;
    const password = pass.value;

    console.log(username, password);
  };

用户名和密码是我想在 userAccount 中传递的值该表单是一个常用的登录表单，有 2 个输入字段和一个带有 type='submit'

的按钮

Answer 1

您没有使用任何状态管理处理程序来存储凭据吗？。如果您想将凭据存储在现有数组中。

    const registerUser = (event) => {
      event.preventDefault();

      var { uname, pass } = document.forms[0];
      const username = uname.value;
      const password = pass.value;
      usersAccount[0].username = username
      usersAccount[0].password = password
   };

但是，使用上述方法存储凭据是一种糟糕的方式。

一个好的方法可能是将现有数组存储在 useState

中

const [cred,setCred] = useState(usersAccount)

const registerUser = (event) => {
  event.preventDefault();

  var { uname, pass } = document.forms[0];
  const username = uname.value;
  const password = pass.value;
  const newUserPass = {username, password}
  setCred([...newUserPass])
};

从 React 中的输入字段将数据存储在数组中

Store data in array from input fields in React

arrays

authentication

json

reactjs