使用自定义输入组件时Firebase Auth无法验证邮箱密码问题求助

问题根因 #

1. 自定义输入组件Emailform/Passform内部重复声明了独立的状态，没有调用父组件传入的value和onChange属性，导致父组件的email/password状态永远是空值，调用Firebase登录接口时传递的是空参数，自然无法匹配到已注册的用户。
2. 组件属性名使用错误，父组件传入的type属性，子组件内部错误读取props.input。
3. Passform的输入框type错误设置为text，不符合密码输入的要求。
4. 通用Form组件没有设计双向绑定逻辑，后续注册功能也会遇到相同的状态同步问题。

修复代码 #

1. 修复Emailform组件 #

function Emailform(props) {
  return (
    <div className={style.formBox}>
      <label className={style.label}>{props.label}:</label>
      <div className={style.input}>
        <input 
          type="email" 
          name={props.name} 
          required="true"
          value={props.value} 
          onChange={props.onChange} 
        />
      </div>
    </div>
  );
}

注：你原来嵌套的<form>标签是多余的，多个输入组件各套一个form会导致回车提交逻辑混乱，建议换成普通div。

2. 修复Passform组件 #

function Passform(props) {
  return (
    <div className={style.formBox}>
      <label className={style.label}>{props.label}:</label>
      <div className={style.input}>
        <input 
          type="password" 
          name={props.name} 
          required="true"
          value={props.value} 
          onChange={props.onChange}
        />
      </div>
    </div>
  );
}

3. 修复通用Form组件（可选，为后续注册功能准备） #

function Form(props) {
  return (
    <div className={style.formBox}>
      <label className={style.label}>{props.label}:</label>
      <div className={style.input}>
        <input 
          type={props.type} 
          name={props.name} 
          required="true"
          value={props.value}
          onChange={props.onChange}
        />
      </div>
    </div>
  );
}

注册页调用时需要对应传入value和onChange绑定父组件的状态即可。

修改完成后父组件的状态就能和自定义输入组件的内容同步，登录时传递给Firebase的参数就会是用户实际输入的内容，就能正常匹配到用户了。

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