时间戳

首页 > 解决方案 > 无法在 ReactJS 中读取 null 的属性“值”

javascript - 无法在 ReactJS 中读取 null 的属性“值”

问题描述

我一直在尝试 console.log 这两个输入，但似乎无法弄清楚，谁能告诉我我做错了什么？我不断收到无法读取 null错误的属性“值”

function printInputs() {
  let username = document.getElementById('user').value
  let password = document.getElementById('pass').value

  console.log(username);
  console.log(password);

}

function App() {

  return (
    <div className="App">
      <h1>Log In</h1>
      <h1>{code}</h1>
      <form>
        <input className='userInput' id='user' type='text' placeholder='username' /><br />
        <input className='userInput' id='pass' type='password' placeholder='password' /><br />
        <input className='userSubmit' type='submit' value='Log In' onSubmit={printInputs()} />
      </form>
    </div>
  );
}

标签： javascriptreactjs

解决方案

onSubmit={printInputs()}

您正在尝试printInputs 立即调用（在render函数返回任何内容之前，因此在页面中输入之前）。

您需要将函数传递给onSubmit：

onSubmit={printInputs}

也就是说，这不是从 React 中的表单获取数据的方法。请参阅React 指南的 Forms 部分以了解正确的方法。

推荐阅读