Question

我想在表单提交成功后清除输入。在这种情况下，我不想使用重置按钮。我已将提交的数据传递到另一个文件中的api。

请帮助。

文件forgotPassword.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);

在authapi.js文件中调用api

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上成功执行结果后，我无法清除“忘记密码”表单组件中的输入。如果有其他方法可以完成此任务，请告诉我。我是新手。非常感谢您的帮助。

Answer 1

更改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>
    );
  }
}

表单提交后如何清除输入内容？

1 个答案: