next.js 如何在Reactjs中获取表单输入值

ix0qys7i  于 2023-01-17  发布在  React
关注(0)|答案(3)|浏览(146)

我正在使用Reactjs和Nextjs框架。现在我有一个表单,并希望获得输入类型的文本值,我在屏幕上得到以下错误

TypeError: Cannot read property 'useState' of null

下面是我目前的代码:

<form onSubmit="{check_login}">

  <div className="form-group">
    <label>Username or email *</label>
    <input
      type="text"
      name="email"
      className="form-control p_input"
      onChange="{handleEmail}"
      value="{state.email}"
    />
  </div>

  <div className="text-center">
    <button
      type="submit"
      className="btn btn-primary btn-block enter-btn"
    >Login</button>
  </div>
</form>

对于get value,我使用以下代码:

const [state, setState] = useState({ email: "", password: "" });

const handleEmail = (e: any) => {
  const value = e.target.value;
  setState({
    ...state,
    [e.target.name]: value,
  });
};

const check_login = (e: any) => {
  e.preventDefault();
  const email = state.email;
  alert("email is " + email);
};

如何修复此错误?

4xy9mtcn

4xy9mtcn1#

我认为你做错了。不要在useState()里面做一个对象,而是把电子邮件和密码分开,为它们做单独的useState()。比如:-

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

我已经做了一个工作示例,可以帮助您更清楚地了解这个主题。

omhiaaxx

omhiaaxx2#

您的代码应该可以工作,只需添加import { useState } from "react";

2ic8powd

2ic8powd3#

首先您需要添加import { useState } from "react";,然后您的value="{state.email}"不正确,JSX使用value={state.email},其他部分也是如此

相关问题