React中输入值存在问题(组件正在将密码类型的受控输入更改为不受控制。)

问题描述 投票:0回答:1

我正在尝试使用React来设置注册页面。我正在通过道具将值从状态传递到“注册”组件。当我输入密码并尝试提交密码时,会发生两件事:

  1. 弹出预定义的警报,提示密码和确认的密码不匹配
  2. 错误消息:“组件正在将密码类型的受控输入更改为不受控制。输入元素不应从受控切换为不受控制(反之亦然)。请在组件的生命周期中决定使用受控还是不受控制的输入元素。”发生

ps.s。我尝试使用短路评估(例如value = {this.state.fields.name ||}}),但是输入值不断刷新为空值。在我的项目中,我正在使用Firebase。

class App extends Component {

  state = {signUpPage: {
              displayName: '',
              email: '',
              password: '',
              confirmPassword: ''
         }

  signUpHandleChange = (event) => {
    const {name, value} = event.target
    this.setState({
      signUpPage: {
        [name]: value
      }
    })
  }

  handleSubmitSignUp = async event => {
    event.preventDefault();
    const { displayName, email, password, confirmPassword} = this.state.signUpPage
    if (password !== confirmPassword) {
      alert("passwords do not match")
      return
    }

    try{
      const {user} = await auth.createUserWithEmailAndPassword(email, password);
      await createUserProfileDocument(user, {displayName});
      this.setState({
        signUpPage: {
          displayName: '',
          email: '',
          password: '',
          confirmPassword: ''
        }
      }) 
    } catch (error) { 
      console.error(error)
    }
  }


 render(){
    return (
      <BrowserRouter>
        <div>
          <SigningPage 
            signUpEmail={this.state.signUpPage.email} 
            signUpPassword={this.state.signUpPage.password}
            signUpConfirmPassword={this.state.signUpPage.confirmPassword}
            signUpValueChange={this.signUpHandleChange}
            signUpsubmit={this.handleSubmitSignUp}/>
        </div>
       </BrowserRouter>
    );
  } }

  //this is the SigningPage component
  const SigningPage = (props) => {
  return <article className={`${classes.signingpageitems} ${classes.signuppage}`}>
                        <h1 >Sign up</h1>
                        <form onSubmit={props.signUpsubmit}>
                            <input 
                                name="email" 
                                type="email" 
                                value={props.signUpEmail} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="email"
                                required>
                            </input>
                            <input 
                                name="password" 
                                type="password" 
                                value={props.signUpPassword} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="password"
                                required>
                            </input>
                            <input 
                                name="confirmPassword" 
                                type="password" 
                                value={props.signUpConfirmPassword} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="confirm password"
                                required>
                            </input>
                            <input type="submit" value="Submit form" className={`${classes.signingpageitem} ${classes.signbtn}`}>

                            </input>
                        </form>
                    </article>
}
javascript html reactjs frontend
1个回答
0
投票

我解决了这个问题。输入中的“名称”属性与“值”属性不匹配。

© www.soinside.com 2019 - 2024. All rights reserved.