防止表单在 ReactJs 中重置输入状态

Question

提交登录表单后，我从 Api 中获取每个特定案例的错误，并在正确的输入下显示它们。问题是提交后登录是否成功，输入状态正在初始化，错误正在显示但是每次用户必须 returns 所有输入并一次又一次地重新填充它们，这非常烦人.

我是 React 的初学者，我真的被这个问题困住了。这是我现在在哪里。

我登录时的片段 class :

class Login extends Component {
constructor(props) {
super(props);
this.state = {
  email: "",
  password: "",
  isLoggedIn: false,
  user: {}
 };
 this.onChange = this.onChange.bind(this);
 this.login = this.login.bind(this);
}

login(e) {
 e.preventDefault();
 this.props.login(this.state.email, this.state.password);
 }

onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}

我的输入示例：

 <div className="form-group centerErrs">
                      <input
                        type="text"
                        value={this.state.email}
                        onChange={this.onChange}
                        className="form-control form-control-user"
                        placeholder="Username or Email Address"
                        autoComplete="off"
                        id="email-input"
                        name="email"
                      />
                      {this.props.errors ? (
                        <small className="form-text  red">
                          {this.props.errors.email}
                        </small>
                      ) : null}
                    </div>

我的登录功能片段：

 var formData = new FormData();
 formData.append("email", email);
 formData.append("password", password);

   //posting to the api 
  .then(json => {
    if (json.data.success) {
      //handling the user data

      let appState = {
        isLoggedIn: true,
        user: userData
      };
      // save app state with user date in local storage
      localStorage["appState"] = JSON.stringify(appState);
      this.setState({
        isLoggedIn: appState.isLoggedIn,
        user: appState.user
      });

      //updated : here how i handle in fail case
      else {
      let appState = {
        isLoggedIn: false,
        errors: json.data
      };
      this.setState({
        isLoggedIn: appState.isLoggedIn,
        errors: appState.errors
      });
    }

更新：这是我的父组件构造函数：

    constructor(props) {
    super(props);
    this.state = {
    isLoggedIn: false,
    user: {},
    errors: {},
    };
   this.login = this.login.bind(this);
  }

更新登录容器：

   const LoginContainer = () => (
   <div>
    {!this.state.isLoggedIn ? (
      <Login login={this.login} errors={this.state.errors} />
    ) : (
      <Redirect to="/" />
    )}
   </div>
 );

在父级渲染：

 <Route exact path="/(login)" component={LoginContainer} />

我只想在表单提交失败时保持输入状态。

我将不胜感激任何形式的帮助，并提前致谢。

Answer 1

只要 LoginContainer 是一个函数，而不是 ReactJs 组件，它就会重新创建整个 UI 因此您应该将其转换为 React.Component 并且检查 Auth 状态的逻辑不应该在里面LoginContainer，因为如果用户已登录，路由 Login 不应该存在

{this.state.loggedin?
 [Auth routes]:
 [<Route exact path="/(login)" component={LoginContainer} />...]

P.S。最好使用全局存储来存储身份验证状态，如 redux 或 unstated 或任何其他。

防止表单在 ReactJs 中重置输入状态

Prevent form from resetting inputs states in ReactJs

reactjs

forms

react-state-management