Блог

Я создал страницу регистрации для своего веб-приложения с помощью react, вот код:

 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);
  

однако я продолжаю получать ошибку типа: не удается прочитать свойство «значение» неопределенного значения.

У кого-нибудь есть какие-либо идеи, пожалуйста, помогите мне с этим!

Кроме того, я пытаюсь получить здесь имя пользователя и поместить его в свой home.js (домашняя страница), как экспортировать первое имя здесь и поместить его в другой js-файл?

Измените это

 setFirstname(e.target.current.value)
  

Для

 setFirstname(e.target.value)
  

current Свойство on отсутствует event.target .

Возможно, вы перепутали event.currentTarget . Но это немного другое.

Вы могли бы проверить разницу между event.currentTarget и event.target здесь -> https://joequery.me/code/event-target-vs-event-currenttarget-30-seconds /