reactjs - 表单提交后如何清除输入?
问题描述
我想在表单提交成功后清除输入。在这种情况下,我不想使用重置按钮。我已将提交的数据传递给另一个文件中的 api。
请帮忙。
文件忘记密码.js
import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { forgotPassword } from "../../actions/authActions";
import classnames from "classnames";
class ForgotPassword extends Component {
constructor() {
super();
this.state = {
email:"",
errors: {}
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.errors) {
this.setState({
errors: nextProps.errors
});
}
}
onChange = e => {
this.setState({ [e.target.id]: e.target.value });
};
onSubmit = e => {
e.preventDefault();
var emailId = {
email: this.state.email
};
this.props.forgotPassword(emailId, this.props.history);
};
render(){
const { errors } = this.state;
return (
<div className="container">
<div className="row">
<div className="col s8 offset-s2">
<div className="col s12" style={{ paddingLeft: "11.250px" }}>
<h4><b>Forgot Password</b></h4>
</div>
<form noValidate onSubmit={this.onSubmit}>
<div className="input-field col s12">
<input
onChange={this.onChange}
value={this.state.email}
error={errors.email}
id="email"
type="email"
className={classnames("", {
invalid: errors.email
})}
/>
<label htmlFor="email">Email</label>
<span className="red-text">{errors.email}</span>
</div>
<div className="col s12" style={{ paddingLeft: "11.250px" }}>
<button
style={{
width: "150px",
borderRadius: "3px",
letterSpacing: "1.5px",
marginTop: "1rem"
}}
type="submit"
className="btn btn-large waves-effect waves-light hoverable blue accent-3"
>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
);
}
onHandleSubmit(e) {
e.preventDefault();
const email = this.state.email;
this.props.onSearchTermChange(email);
console.log(email);
this.setState({
email: ''
});
}
}
ForgotPassword.propTypes = {
forgotPassword: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
export default connect(
mapStateToProps,
{ forgotPassword }
)(ForgotPassword);
调用 api 的文件 authaction.js
import axios from "axios";
import setAuthToken from "../utils/setAuthToken";
import jwt_decode from "jwt-decode";
import { GET_ERRORS, SET_CURRENT_USER, USER_LOADING} from "./types";
export const forgotPassword = (userData, history) => dispatch => {
axios
.post("/api/users/forgotpassword", userData)
.then(res =>
console.log("forgot password",res)
)
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
在 api 上成功获得结果后,我无法清除忘记密码表单组件中的输入。如果有其他方法可以完成这项任务,请告诉我。我是新手。非常感谢您的帮助。
解决方案
更改 TextInput 组件的值
您可以在来自按钮的 onPress 事件之后更改输入的上下文。
export default class App extends React.Component {
state = {
text : "Username"
}
render() {
return (
<View style={styles.container}>
// TextInput gets its value from the state.text above.
<TextInput value={this.state.text } style={{borderColor:"black", border:1}}/>
// Button calls the function in onPress when it is pressed, which cleans up the state.text
<Button title="CLEAN" onPress={() => this.setState({text: ""})} />
</View>
);
}
}
推荐阅读
- javascript - 我可以使用 Webpack 来捆绑供应商包吗?
- python - 通过 Python 请求发布 JSON 时不返回任何内容或返回错误 500?
- php - 在 Woocommerce 档案页面中添加产品副标题
- exception - 当我通过 IIS Express 运行我的 Asp.net MVC 应用程序时,它工作正常,但是当我将它切换到本地 IIS 时,它给了我这个错误
- php - 在 double 上调用成员函数 first()
- android - 从生产区降级到 Beta - Android
- javascript - 使用“Web Audio API”和“AudioContext”获取带有 JavaScript 的 MP3 文件的持续时间
- oracle - 使用 ora2pg 将 Oracle Db 转换为 PostgreSQL
- ios - 交换方法时找不到选择器
- arm - Arm 组装和字节序中的 MD5 哈希