Question

无法读取 ReactJS 中 null 的属性“value”

2020-01-14

8659

javascript reactjs

我一直试图将这 2 个输入 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>
  );
}

Answer 1

onSubmit={printInputs()}

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

您需要将一个函数传递给 onSubmit ：

onSubmit={printInputs}

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

Answer 2

在 React 中编写表单的方法。工作示例 demo

function App() {
  const [state, setState] = React.useState({ username: "", password: "" });
  const handleSubmit = e => {
    e.preventDefault();
    console.log(state);
  };
  const handleChange = e => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };
  return (
    <div className="App">
      <h1>Log In</h1>
      <form onSubmit={handleSubmit}>
        <input
          className="userInput"
          name="username"
          type="text"
          placeholder="username"
          onChange={handleChange}
        />
        <br />
        <input
          className="userInput"
          name="password"
          type="password"
          placeholder="password"
          onChange={handleChange}
        />
        <br />
        <input className="userSubmit" type="submit" value="Log In" />
      </form>
    </div>
  );
}

Answer 3

首先，永远不要使用真实的 dom 来操作 React 中的 dom，而是使用状态来获取 de 值，并在 Form 标签中使用 onSumbit

import React, { useState } from "React";
const App = () => {
    const [userName, setUserName] = useState("");
    const [password, setPassword] = useState("");
    const printInputs = () => {
        console.log(userName);
        console.log(password);
    };
    return (
        <div className="App">
            <h1>Log In</h1>

            <form onSubmit={printInputs}>
                <input
                    className="userInput"
                    id="user"
                    type="text"
                    placeholder="username"
                    onChange={event => setUserName(event.target.value)}
                />
                <br />
                <input
                    className="userInput"
                    id="pass"
                    type="password"
                    placeholder="password"
                    onChange={event => setPassword(event.target.value)}
                />
                <br />
                <input
                    className="userSubmit"
                    type="submit"


            value="Log In"/>
                </form>
            </div>
        );
    };
    export default App;