无法在输入字段中输入值 reactjs

Question

我正在用reactjs和firebase做一个登录和注册表单。

我正确地创建了字段，但我无法在我创建的输入字段(电子邮件，密码)中输入值以保存在我的firebase项目中。我不知道问题出在哪里。对我来说一切都很好。我需要帮助。当我删除电子邮件字段值中的val.email时，我可以在字段中输入值，但我将无法保存在数据库中字段中输入的数据。这和我面对密码的情况是一样的，我不知道我错过了什么。我将等待一个好的回应。

import React from "react";
import { Link } from "react-router-dom";
import Footer from "../components/Footers/Footer";
import Navbar from "./Navbars/AuthNavbar";
import firebase from 'firebase';
import app from '../utils/firebase';
const Login=() =>{
const [val, setVal] = React.useState({
email: '',
password: '',});
const handleChange = (e) => {const value = e.target.value;const name = 
e.target.name;setVal((prevState) => ({ ...prevState, [name]: value }));};
const handleLoginButton = () => {
setLoader({ googleLoading: false, buttonLoading: true });
if(!val.email || !val.password){
setError({ message: 'Email and Password are required', open: true });
setLoader({ googleLoading: false, buttonLoading: false });
}else {
setError({message:'', open: false });
app.auth().signInWithEmailAndPassword(val.email, val.password).then((user) => {
console.log(user)
setLoader({ googleLoading: false, buttonLoading: false })
}).catch(error => {
console.log(error, 'error in loggin in');
setError({ message: error.message, open: true });
setLoader({ googleLoading: false, buttonLoading: false });
})
}
};
<div className="flex-auto px-4 lg:px-10 py-10 pt-0">
<div className="text-blueGray-400 text-center mb-3 font-bold">
<small>Or sign in with credentials</small>
</div>
<form>
<div className="relative w-full mb-3">
<label
className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
htmlFor="grid-password"
>
Email
</label>
<input
type="email"
value={val.email}
onChange={handleChange}
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Email"
/>
</div>
<div className="relative w-full mb-3">
<label
className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
htmlFor="grid-password"
>
Password
</label>
<input
value={val.password}
onChange={handleChange}
type="password"
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Password"
/>
</div>
<div>
<label className="inline-flex items-center cursor-pointer">
<input
id="customCheckLogin"
type="checkbox"
className="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
/>
<span className="ml-2 text-sm font-semibold text-blueGray-600">
Remember me
</span>
</label>
</div>

<div className="text-center mt-6">
<button
onClick={() => handleLoginButton()}
className="bg-blue-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
type="button"
>
Sign In
</button>
</div>

Answer 1

您缺少name属性。这就是为什么你的状态没有更新，你没有得到任何属性值。

这将帮助你

import React from "react";
import { Link } from "react-router-dom";
import Footer from "../components/Footers/Footer";
import Navbar from "./Navbars/AuthNavbar";
import firebase from 'firebase';
import app from '../utils/firebase';
const Login=() =>{
const [val, setVal] = React.useState({
email: '',
password: ''
});
const handleChange = (e) => {const value = e.target.value;const name = 
e.target.name;setVal((prevState) => ({ ...prevState, [name]: value }));};
const handleLoginButton = () => {
setLoader({ googleLoading: false, buttonLoading: true });
if(!val.email || !val.password){
setError({ message: 'Email and Password are required', open: true });
setLoader({ googleLoading: false, buttonLoading: false });
}else {
setError({message:'', open: false });
app.auth().signInWithEmailAndPassword(val.email, 
val.password).then((user) => {
console.log(user)
setLoader({ googleLoading: false, buttonLoading: false })
}).catch(error => {
console.log(error, 'error in loggin in');
setError({ message: error.message, open: true });
setLoader({ googleLoading: false, buttonLoading: false });
})
}
};
<div className="flex-auto px-4 lg:px-10 py-10 pt-0">
<div className="text-blueGray-400 text-center mb-3 font-bold">
<small>Or sign in with credentials</small>
</div>
<form>
<div className="relative w-full mb-3">
<label
className="block uppercase text-blueGray-600 text-                    xs font-bold mb-2"
htmlFor="grid-password"
>
Email
</label>
<input
name="email"
type="email"
value={val.email}
onChange={handleChange}
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Email"
/>
</div>
<div className="relative w-full mb-3">
<label
className="block uppercase text-blueGray-600 text-                            xs font-bold mb-2"
htmlFor="grid-password"
>
Password
</label>
<input
name="password"
value={val.password}
onChange={handleChange}
type="password"
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Password"
/>
</div>
<div>
<label className="inline-flex items-center cursor-pointer">
<input
id="customCheckLogin"
type="checkbox"
className="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
/>
<span className="ml-2 text-sm font-semibold text-blueGray-600">
Remember me
</span>
</label>
</div>

<div className="text-center mt-6">
<button
onClick={() => handleLoginButton()}
className="bg-blue-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
type="button"
>
Sign In
</button>
</div>

Answer 2

看起来你的handleLoginButton缺少preventDefault方法。由于输入字段标记和按钮都在表单标记中，因此每当单击按钮时，它都会重新加载窗口。通过调用preventDefault，您可以阻止窗口重新加载并尝试将表单提交给本地服务器。

const handleLoginButton = (event) => {
event.preventDefault()
...
}

update button onClick

onClick={handleLoginButton}

或

onClick={(e) => handleLoginButton(e)}

您还需要在输入标记上设置name属性。参见文档:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

你的handleChange试图访问'name'与e.target.name，但这还没有设置在输入。见下文.

<input
type="email"
name="email"
value={val.email}
onChange={handleChange}
placeholder="Email"
/>