React登录表单点击提交后state重置问题及修复方案咨询

问题描述 #

使用Bootstrap开发React登录表单，创建了App.js主组件和负责根据state展示内容的Handler.js组件。点击提交按钮后通过alert发现state被重置，需要解决：

1. 点击提交后state被重置的原因
2. 如何让按钮点击后state设为1
3. 输入框的用户名和密码值如何正确绑定

问题原因 #

1. 直接修改state：React类组件中不能直接赋值this.state = 1，必须使用this.setState()方法。直接修改state不会触发组件重新渲染，且后续会被React的状态管理机制覆盖。
2. 表单默认提交行为：点击提交按钮后，表单会触发默认的HTTP提交流程，导致页面刷新，组件重新挂载，state被重置为初始值0。
3. 非受控组件写法错误：当前将username和password作为类实例属性而非state的一部分，无法实现双向绑定，组件重新渲染时这些值会丢失。

修复方案 #

1. 正确管理组件state #

将登录状态、用户名、密码全部纳入state管理，通过this.setState()修改状态，确保React能感知变化并触发组件更新。

2. 阻止表单默认提交 #

在提交事件处理函数中调用event.preventDefault()，避免页面刷新导致组件重置。

3. 实现受控输入框 #

通过onChange事件实时更新state中的字段，输入框value绑定state对应值，实现双向绑定。

修改后的代码 #

Handler.js #

import { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
import { Form } from 'react-bootstrap';

class Handler extends Component {
  constructor() {
    super();
    // 初始化state，包含登录状态、用户名、密码
    this.state = {
      loginStatus: 0,
      username: '',
      password: ''
    };
  }

  submitUserPass = (event) => {
    // 阻止表单默认提交行为，避免页面刷新
    event.preventDefault();
    // 使用setState异步更新状态，回调中可获取最新state
    this.setState({ loginStatus: 1 }, () => {
      alert(this.state.loginStatus);
    });
    // 这里可获取用户名和密码做后续登录逻辑处理
    console.log('用户名:', this.state.username, '密码:', this.state.password);
  }

  // 更新用户名state
  setUs = (event) => {
    this.setState({ username: event.target.value });
  }

  // 更新密码state
  setPs = (event) => {
    this.setState({ password: event.target.value });
  }

  render() {
    if (this.state.loginStatus === 0) {
      return (
        <Form onSubmit={this.submitUserPass}>
          <Form.Group controlId="usernameId">
            <Form.Label>Username</Form.Label>
            <Form.Control
              value={this.state.username}
              onChange={this.setUs}
              type="text"
              placeholder="username"
            />
          </Form.Group>
          <Form.Group controlId="passwordId">
            <Form.Label>Password</Form.Label>
            <Form.Control
              value={this.state.password}
              onChange={this.setPs}
              type="password"
              placeholder="password"
            />
          </Form.Group>
          <Button className="mt-2" variant="primary" type="submit">
            Log in
          </Button>
        </Form>
      );
    } else {
      // 登录状态为1时展示的内容，可根据需求修改
      return <h3>登录成功！</h3>;
    }
  }
}

export default Handler;

其他组件说明 #

App.js、index.js和package.json无需修改，保持原代码即可正常运行。

内容的提问来源于stack exchange，提问作者hacker man