Fatal编程技术网
  • javascript/
  • Javascript 合成事件而不是useState值

Javascript 合成事件而不是useState值

javascript reactjs

Javascript 合成事件而不是useState值,javascript,reactjs,Javascript,Reactjs,我是个新手，所以在我试图解释这个问题时，请容忍我。我正在创建一个应用程序，它可以提取所有COD客户信息，允许用户在其中搜索，还可以创建一个计算器来计算网站上的总费用，但是所有的工作和堆栈都需要更多的文本而不是代码，所以我真的只是填满空间来发布我真正的问题 我在管理员页面上工作，但每当我点击提交按钮进行测试时，我都会得到以下信息： SyntheticEvent {dispatchConfig: null,etc} 对于表单中的所有3个字段，我不知道为什么。所有my console.log都将字段

我是个新手，所以在我试图解释这个问题时，请容忍我。我正在创建一个应用程序，它可以提取所有COD客户信息，允许用户在其中搜索，还可以创建一个计算器来计算网站上的总费用，但是所有的工作和堆栈都需要更多的文本而不是代码，所以我真的只是填满空间来发布我真正的问题

我在管理员页面上工作，但每当我点击提交按钮进行测试时，我都会得到以下信息：

SyntheticEvent {dispatchConfig: null,etc}
对于表单中的所有3个字段，我不知道为什么。所有my console.log都将字段显示为null/event，因此不会传递任何信息

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;

import React，{useState，useffect}来自“React”；
从“./api”导入{registerUser}；
常量管理=（）=>{
const admin=localStorage.getItem（“admin”）；
const[user，setUser]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[email，setEmail]=useState（“”）；
const handleSubmit=（事件）=>{
event.preventDefault（）；
控制台日志（用户、密码、电子邮件）；
取消课程（）；
};
const cancelCourse=（）=>{
setUser（“”）；
设置密码（“”）；
setEmail（“”）；
};
如果（！admin）{
返回您没有访问权限；
}否则{
返回(
创建用户
提交
);
}
};
导出默认管理员；
使用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;

import React，{useState，useffect}来自“React”；
从“./api”导入{registerUser}；
常量管理=（）=>{
const admin=localStorage.getItem（“admin”）；
const[user，setUser]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[email，setEmail]=useState（“”）；
const handleSubmit=（事件）=>{
event.preventDefault（）；
控制台日志（用户、密码、电子邮件）；
取消课程（）；
};
const cancelCourse=（）=>{
setUser（“”）；
设置密码（“”）；
setEmail（“”）；
};
如果（！admin）{
返回您没有访问权限；
}否则{
返回(
创建用户
setUser（e.target.value）}
>
setPassword（e.target.value）}
>
setEmail（e.target.value）}
>
提交
);
}
};
导出默认管理员；
使用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;

import React，{useState，useffect}来自“React”；
从“./api”导入{registerUser}；
常量管理=（）=>{
const admin=localStorage.getItem（“admin”）；
const[user，setUser]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[email，setEmail]=useState（“”）；
const handleSubmit=（事件）=>{
event.preventDefault（）；
控制台日志（用户、密码、电子邮件）；
取消课程（）；
};
const cancelCourse=（）=>{
setUser（“”）；
设置密码（“”）；
setEmail（“”）；
};
如果（！admin）{
返回您没有访问权限；
}否则{
返回(
创建用户
setUser（e.target.value）}
>
setPassword（e.target.value）}
>
setEmail（e.target.value）}
>
提交
);
}
};
导出默认管理员；
您需要将呼叫更新为
setUser
、
setPassword
和
setEmail
。对于当前代码，它无法设置
useState
期望的准确值。需要设置如下内容：

setUser（event.target.value）}
/>
我已为您的参考创建了上。

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

setUser（event.target.value）}
/>
我已经为您的参考创建了。

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

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;

import React，{useState，useffect}来自“React”；
从“./api”导入{registerUser}；
常量管理=（）=>{
const main=localStorage.getItem（“admin”）；
const[user，setUser]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[email，setEmail]=useState（“”）；
常量handleRegis=（事件）=>{
event.preventDefault（）；
//注册者（用户、密码、电子邮件）；
控制台日志（用户、密码、电子邮件）；
取消课程（）；
};
const cancelCourse=（）=>{
setUser（“”）；
设置密码（“”）；
setEmail（“”）；
};
const changeUser=（事件）=>{
setUser（event.target.value）；
};
const changePassword=（事件）=>{
设置密码（event.target.value）；
};
常量更改电子邮件=（事件）=>{
setEmail（event.target.value）；
};
如果（！main）{
返回您没有访问权限；
}否则{
返回(
创建用户
提交
);
}
};
导出默认管理员；
我在下面提取了一个愚蠢的、有效的代码

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;

import React，{useState，useffect}来自“React”；
从“./api”导入{registerUser}；
常量管理=（）=>{
const main=localStorage.getItem（“admin”）；
const[user，setUser]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[email，setEmail]=useState（“”）；
常量handleRegis=（事件）=>{
event.preventDefault（）；
//注册者（用户、密码、电子邮件）；
控制台日志（用户、密码、电子邮件）；
取消课程（）；
};
const cancelCourse=（）=>{
setUser（“”）；
设置密码（“”）；
setEmail（“”）；
};
const changeUser=（事件）=>{
setUser（event.target.value）；
};
const changePassword=（事件）=>{
设置密码（event.target.value）；
};
常量更改电子邮件=（事件）=>{
setEmail（event.target.value）；
};
如果（！main）