我正在尝试使用React来设置注册页面。我正在通过道具将值从状态传递到“注册”组件。当我输入密码并尝试提交密码时,会发生两件事:
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>
}
我解决了这个问题。输入中的“名称”属性与“值”属性不匹配。