javascript - ReactJS - onSubmit 函数未执行
问题描述
我一直在尝试为我的电子商务项目实现一个注册组件,但是当我点击“注册”按钮(即自定义按钮组件)时,“handleSubmit”功能根本没有被执行。我正在使用 Firebase身份验证以及数据库以及对此的任何帮助将不胜感激。提前致谢。
class SignUp extends Component {
constructor() {
super();
this.state = {
displayName: "",
email: "",
password: "",
confirmPassword: ""
};
}
handleSubmit = async event => {
event.preventDefault();
const { displayName, email, password, confirmPassword } = this.state;
if (password !== confirmPassword) {
alert("Passwords don't match");
return;
}
try {
const { user } = await auth.createUserWithEmailAndPassword(
email,
password
);
await createUserProfileDocument(user, { displayName });
this.setState({
displayName: "",
email: "",
password: "",
confirmPassword: ""
});
} catch (error) {
console.log(error);
}
};
handleChange = event => {
const { name, value } = event.target;
this.setState({ [name]: value });
};
render() {
const { displayName, email, password, confirmPassword } = this.state;
return (
<div className="sign-up">
<h2 className="title">I do not have an account</h2>
<span>Sign up with your email and password</span>
<form className="sign-up-form" onSubmit={this.handleSubmit}>
<FormInput
type="text"
name="displayName"
value={displayName}
onChange={this.handleChange}
label="Display Name"
required
/>
<FormInput
type="email"
name="email"
value={email}
onChange={this.handleChange}
label="Email"
required
/>
<FormInput
type="password"
name="password"
value={password}
onChange={this.handleChange}
label="Password"
required
/>
<FormInput
type="password"
name="confirmPassword"
value={confirmPassword}
onChange={this.handleChange}
label="Confirm Password"
required
/>
<CustomButton type="submit">SIGN UP</CustomButton>
</form>
</div>
);
}
}
解决方案
在构造函数中绑定handleSubmit:
constructor(){
super();
this.state = {
displayName : '',
email : '',
password : '',
confirmPassword : ''
}
this.handleSubmit = this.handleSubmit.bind(this);
}
阅读这篇文章,了解为什么应该在 React 中绑定事件处理程序。
编辑
由于您使用的是箭头功能,因此上述解决方案可能不起作用。
我认为问题出在CustomButton
. 我认为它应该看起来像这样:
class CustomButton {
render() {
return (
<SomeTag>
<button type="submit" someProps={someValue}>
{someTitle}
</button>
// or <input type="submit" />
</SomeTag>
);
};
}
关键是,真正的按钮或输入标签应该具有“提交”类型属性。
如果您想将类型属性传递给按钮或输入标签,您可以执行以下操作(在 CustomButton.jsx 中):
<button someProp={someValue} {...props}>
{someTitle}
</button>
推荐阅读
- c# - DLL 项目和 GUI 项目 - Caliburn Micro:模型/查看 VM 问题
- purescript - 如何使用 Spago 安装特定的软件包版本?
- android - 应用程序链接 - 应用程序无法从浏览器打开
- android - 设备所有者管理员 / DevicePolicyManager,可以在 Android 上自动打开移动数据和数据漫游吗?
- spring - SqlResultSetMapping 从 NamedNativeQuery 到 POJO 类抛出“找不到适当的构造函数”
- php - 已发布变量中的引号未在下一页显示回显
- list - 是否有一个函数,当 a 和 b 相乘时,结果 x 相同,并且 x 由用户给出
- javascript - bind-html-compile 缺乏适当的拆解
- api - 登录flutter后如何调用get请求?
- mstest - 如何在 github 操作中使用 mstest?