Question

我刚开始使用React，所以在尝试解释这个问题时请多多包涵。我正在创建一个应用程序，该应用程序可提取所有COD客户信息并允许用户搜索该信息，并创建一个计算器以计算现场总费用，但是，所有正常工作和堆叠所需的文字多于代码，因此我我真的只是在填满空间以发表我的真实问题。

我正在管理页面上醒来，但是每当我按下“提交”按钮进行测试时，我都会得到以下提示：

SyntheticEvent {dispatchConfig: null,etc}

对于表格中的所有3个字段，我只是想不通为什么。我所有的console.logs字段都显示为null / SyntheticEvent，因此没有信息通过。

import React, { useState, useEffect } from "react";
import { registerUser } from "../api";

const Admin = () => {
  const admin = localStorage.getItem("admin");
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(user, password, email);
    cancelCourse();
  };

  const cancelCourse = () => {
    setUser("");
    setPassword("");
    setEmail("");
  };

  if (!admin) {
    return <div className="pleaselogin">You do not have access</div>;
  } else {
    return (
      <div className="page">
        <form id="create">
          <div>Create User</div>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Name"
            onChange={setUser}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Password"
            onChange={setPassword}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Email"
            onChange={setEmail}
          ></input>
          <button className="submit" onClick={handleSubmit}>
            Submit
          </button>
        </form>
      </div>
    );
  }
};

export default Admin;

Answer 1

您需要将呼叫更新为setUser，setPassword和setEmail。使用当前代码，无法设置useState期望的确切值。需要设置如下内容：

<input
className="form-input"
id="name"
placeholder="Enter User's Name"
onChange={(event) => setUser(event.target.value)}
/>

我已经在code sandbox上创建了供您参考。

Answer 2

使用e => setUser（e.target.value）代替setUser等

所以您的代码应该是

import React, { useState, useEffect } from "react";
import { registerUser } from "../api";

const Admin = () => {
  const admin = localStorage.getItem("admin");
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(user, password, email);
    cancelCourse();
  };

  const cancelCourse = () => {
    setUser("");
    setPassword("");
    setEmail("");
  };

  if (!admin) {
    return <div className="pleaselogin">You do not have access</div>;
  } else {
    return (
      <div className="page">
        <form id="create">
          <div>Create User</div>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Name"
            onChange={e => setUser(e.target.value)}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Password"
            onChange={e => setPassword(e.target.value)}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Email"
            onChange={e => setEmail(e.target.value)}
          ></input>
          <button className="submit" onClick={handleSubmit}>
            Submit
          </button>
        </form>
      </div>
    );
  }
};

export default Admin;

Answer 3

我在下面拉了一个愚蠢的工作代码

import React, { useState, useEffect } from "react";
import { registerUser } from "../api";

const Admin = () => {
  const main = localStorage.getItem("admin");
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const handleRegis = (event) => {
    event.preventDefault();
    // registerUser(user, password, email);
    console.log(user, password, email);
    cancelCourse();
  };

  const cancelCourse = () => {
    setUser("");
    setPassword("");
    setEmail("");
  };

  const changeUser = (event) => {
    setUser(event.target.value);
  };

  const changePassword = (event) => {
    setPassword(event.target.value);
  };

  const changeEmail = (event) => {
    setEmail(event.target.value);
  };

  if (!main) {
    return <div className="pleaselogin">You do not have access</div>;
  } else {
    return (
      <div className="page">
        <form id="create">
          <div>Create User</div>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Name"
            value={user}
            onChange={changeUser}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Password"
            value={password}
            onChange={changePassword}
          ></input>
          <input
            className="form-input"
            id="name"
            placeholder="Enter User's Email"
            value={email}
            onChange={changeEmail}
          ></input>
          <button className="submit" onClick={handleRegis}>
            Submit
          </button>
        </form>
      </div>
    );
  }
};

export default Admin;

综合事件，而不是useState值

3 个答案: