Javascript 反应复位或清除输入
一旦表单提交,我将尝试重置或清除输入 有人能告诉我怎么做吗。我试图调用this.state.user,以便它以空字符串重新开始,但这并没有帮助。在这种情况下,我必须做什么才能在表单提交后清除输入 我试着用history.push'/register'回忆页面;并发送“表格”;但不幸的是,仍然没有清除输入Javascript 反应复位或清除输入,javascript,reactjs,Javascript,Reactjs,一旦表单提交,我将尝试重置或清除输入 有人能告诉我怎么做吗。我试图调用this.state.user,以便它以空字符串重新开始,但这并没有帮助。在这种情况下,我必须做什么才能在表单提交后清除输入 我试着用history.push'/register'回忆页面;并发送“表格”;但不幸的是,仍然没有清除输入 import React from 'react'; import { Link } from 'react-router-dom'; import { connect } from 'reac
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
class RegisterPage extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {
firstName: '',
lastName: '',
username: '',
password: ''
},
submitted: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const { name, value } = event.target;
const { user } = this.state;
this.setState({
user: {
...user,
[name]: value
}
});
}
handleSubmit(event) {
event.preventDefault();
this.setState({ submitted: true });
const { user } = this.state;
const { dispatch } = this.props;
if (user.firstName && user.lastName && user.username && user.password) {
dispatch(userActions.register(user));
}
}
render() {
const { registering } = this.props;
const { user, submitted } = this.state;
return (
<div className="col-md-6 col-md-offset-3">
<h2>Register</h2>
<form name="form" onSubmit={this.handleSubmit}>
<div className={'form-group' + (submitted && !user.firstName ? ' has-error' : '')}>
<label htmlFor="firstName">Username</label>
<input type="text" className="form-control" name="firstName" value={user.firstName} onChange={this.handleChange} />
{submitted && !user.firstName &&
<div className="help-block">First Name is required</div>
}
</div>
<div className={'form-group' + (submitted && !user.lastName ? ' has-error' : '')}>
<label htmlFor="lastName">Password</label>
<input type="password" className="form-control" name="lastName" value={user.lastName} onChange={this.handleChange} />
{submitted && !user.lastName &&
<div className="help-block">Last Name is required</div>
}
</div>
<div className={'form-group' + (submitted && !user.username ? ' has-error' : '')}>
<input type="hidden" className="form-control" name="username" value={user.username = user.firstName} onChange={this.handleChange} />
{submitted && !user.username &&
<div className="help-block">Username is required</div>
}
</div>
<div className={'form-group' + (submitted && !user.password ? ' has-error' : '')}>
<input type="hidden" className="form-control" name="password" value={user.password} onChange={this.handleChange} />
{submitted && !user.password &&
<div className="help-block">Password is required</div>
}
</div>
<div className="form-group">
<button className="btn btn-primary">Register</button>
{registering &&
<img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
}
{/* <Link to="/login" className="btn btn-link">Cancel</Link> */}
</div>
</form>
</div>
);
}
}
function mapStateToProps(state) {
const { registering } = state.registration;
return {
registering
};
}
const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
export { connectedRegisterPage as RegisterPage };
任何帮助都将不胜感激 这对我来说很有效,尽管它会在字段清除时触发所有错误消息
handleSubmit(event) {
event.preventDefault();
const { user } = this.state;
const { dispatch } = this.props;
if (user.firstName && user.lastName && user.username && user.password) {
dispatch(userActions.register(user));
}
this.setState({
submitted: true,
user: {
firstName: '',
lastName: '',
username: '',
password: ''
}
});
}
因为提交成为真实&&!&&将始终呈现为空字符串。如果解决了您的问题,您介意接受答案吗是的。您可以在提交时运行验证函数,并为每个输入设置标志(如果它们是空字符串而不是提交),尽管您可以使用许多不同的方法。考虑下一个问题,如果你想不出来的话:当然。发布另一个问题,我来看看
handleSubmit(event) {
event.preventDefault();
const { user } = this.state;
const { dispatch } = this.props;
if (user.firstName && user.lastName && user.username && user.password) {
dispatch(userActions.register(user));
}
this.setState({
submitted: true,
user: {
firstName: '',
lastName: '',
username: '',
password: ''
}
});
}