ReactJS+Firebase登录表单输入框无法输入值的问题求助

嘿，我看了你的代码，马上就发现了问题的根源——你的邮箱和密码输入框没有设置name属性，这直接导致你的handleChange函数无法正确更新组件的state，所以才会出现输入框无法输入，或者输入后数据无法同步到state的情况。

具体原因 #

你的handleChange函数是通过e.target.name来匹配state中的email和password字段的：

setVal((prevState) => ({ ...prevState, [name]: value }));

但你的两个input标签都没有添加对应的name属性，所以当用户输入内容时，e.target.name的值是undefined，state里的email和password根本不会被更新。这就导致：

• 当绑定value={val.email}时，输入框的内容一直是初始的空字符串，无法输入；
• 移除value绑定后，输入框能输入，但state没同步，调用signInWithEmailAndPassword时用的还是初始空值，自然无法完成登录。

修改后的代码 #

只需要给两个input标签加上对应的name属性即可，修改后的输入框部分代码如下：

// 邮箱输入框
<input 
  type="email" 
  name="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" 
/> 

// 密码输入框
<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" 
/> 

额外检查点 #

除了这个核心问题，你还可以确认一下：

• 你的Firebase初始化文件../utils/firebase是否正确配置了认证服务；
• 确保你的Firebase项目已经启用了“邮箱/密码”登录方式（在Firebase控制台的Authentication模块中设置）。

这样修改后，输入框应该能正常输入，state也会同步更新，调用signInWithEmailAndPassword时就能正确传递邮箱和密码了。

内容的提问来源于stack exchange，提问作者Tebah Princewill