Javascript TypeError:无法读取属性'；价值'；未定义的注册页的名称

我使用react为我的web应用程序创建了一个注册页面，下面是代码：

import React, { useCallback, useState } from "react";
import { withRouter } from "react-router";
import app from "../base";

const SignUp = ({ history }) => {
  const handleSignUp = useCallback(
    async (event) => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await app
          .auth()
          .createUserWithEmailAndPassword(email.value, password.value);
        history.push("/");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  const [firstName, setFirstname] = useState('');

  const handleFirstNameInput = e => {
    setFirstname(e.target.current.value);
  };
  
  const logName = () => {
    alert(firstName);
  };

  return (
    <div className="flex h-screen">
      <form
        className="w-full max-w-lg m-auto border-solid border-4 border-gray-600 p-6 rounded-lg"
        onSubmit={handleSignUp}
      >
        <div className="flex flex-wrap -mx-3">
          {/* Div for first name field */}
          <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
              htmlFor="grid-first-name"
            >
              First Name
            </label>
            <input
              className="appearance-none block w-full bg-gray-200 text-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
              id="grid-first-name"
              type="text"
              placeholder="Ramon"
              onChange={handleFirstNameInput}
              value={firstName}
            />
          </div>
          {/* Div for last name */}
          <div className="w-full md:w-1/2 px-3">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
              htmlFor="grid-last-name"
            >
              Last Name
            </label>
            <input
              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
              id="grid-last-name"
              type="text"
              placeholder="Wenzel"
            />
          </div>
        </div>
        <div className="flex flex-wrap -mx-3 mb-6">
          {/* Div for email */}
          <div className="w-full px-3">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
              htmlFor="grid-password"
            >
              Email
            </label>
            <input
              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
              id="grid-email"
              type="email"
              placeholder="123@example.com"
            />
          </div>

          {/* Div for password */}
          <div className="w-full px-3">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
              htmlFor="grid-password"
            >
              Password
            </label>
            <input
              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
              id="grid-password"
              type="password"
              placeholder="******************"
            />
          </div>
        </div>
        <div className="md:flex md:items-center">
          {/* Submit Button */}
          <button
            className="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
            type="submit"
            onClick={logName}
          >
            Sign Up
          </button>
        </div>
      </form>
    </div>
  );
};

export default withRouter(SignUp);

import React，{useCallback，useState}来自“React”；
从“react router”导入{withRouter}；
从“./base”导入应用程序；
常量注册=（{history}）=>{
const handleSignUp=useCallback(
异步（事件）=>{
event.preventDefault（）；
const{email，password}=event.target.elements；
试一试{
等待应用程序
.auth（）
.createUserWithEmailAndPassword（email.value，password.value）；
历史。推送（“/”）；
}捕获（错误）{
警报（错误）；
}
},
[历史]
);
const[firstName，setFirstname]=useState（“”）；
const handleFirstNameInput=e=>{
setFirstname（例如target.current.value）；
};
常量日志名=（）=>{
警报（名字）；
};
返回(
{/*Div代表名字字段*/}
名字
{/*Div代表姓氏*/}
姓
{/*Div用于电子邮件*/}
电子邮件
{/*Div用于密码*/}
密码
{/*提交按钮*/}
注册
);
};
使用路由器导出默认值（注册）；

但是，我不断得到TypeError：无法读取未定义的属性“value”

有人有什么想法吗？请帮我

另外，我正在尝试在这里获取用户的名字并将其放入my home.js（主页），如何在这里导出名字并将其放入另一个js文件？

更改此设置

setFirstname(e.target.current.value)

到

事件.目标

上没有当前的

属性

您可能混淆了
事件.currentTarget
。但这有点不同

您可以检查
event.currentTarget
和
event.target
之间的差异，此处->
谢谢您的帮助，我将其更改为e.target.value，但它仍然会给我类型错误消息检查此->
setFirstname(e.target.value)