嗨,我正在使用react-redux,react-redux-firebase制作图库应用。
现在,不会触发登录表单和handleSubmit的工作。
但是handleChange可以正常工作。有人可以帮我吗?
import React from "react";
import { Link } from "react-router-dom";
export class SignIn extends React.Component {
constructor() {
super();
this.state = { email: "", password: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
console.log("onchange");
this.setState({ [e.target.id]: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
console.log("clicked");
this.props.signIn(this.state);
}
render() {
console.log(this.props);
return (
<div className="sign-in">
<ul className="active-or-not">
<li className="active-user">
<Link to="/Sign-in">Sign in</Link>
</li>
<li className="not-active-user">
<Link to="/Registration">New</Link>
</li>
</ul>
<div className="container">
<form className="form" onSubmit={this.handleSubmit}>
<div className="input-field">
<input
placeholder="Email"
className="input"
type="email"
id="email"
pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
onChange={this.handleChange}
/>
</div>
<div className="input-field">
<input
placeholder="Password"
type="password"
id="password"
pattern="^\S*$"
maxLength="20"
className="input"
onChange={this.handleChange}
/>
</div>
<div className="input-field">
<button type="submit" className="submit">
Go
</button>
</div>
</form>
</div>
</div>
);
}
}
Onchange集体触发,控制台显示结果,但是当单击“提交”按钮时,没有任何显示。 我一直在尝试看到类似的问题,但找不到实际的解决方法。