React简单登录表单功能实现与构建报错修复咨询

一、现有代码核心错误说明 #

• 混用了函数组件和类组件的语法：你声明的是function LoginForm（函数组件），但用了仅类组件支持的this.state、this.setState、this.props写法
• 两个输入框的change事件写错了更新的state字段，都写成了email，应该分别对应username和password
• 变量引用错误：直接写username-input、username-password属于无效语法，不是正确获取state值的方式
• Redux的mapDispatchToProps使用方式完全错误，函数组件要绑定redux action应该用useDispatch钩子，或者用connect高阶组件包裹
• 提交按钮的onClick事件直接调用了函数而不是传函数引用，会导致组件渲染时就触发提交
• 没有给输入框绑定value属性，无法实现输入内容和state的双向绑定
• 没有引入signup对应的action函数，导致报错

二、修复后完整可运行代码 #

优先用函数组件+Hooks写法，符合当前React官方推荐规范：

import React, { useState } from "react";
import { useDispatch } from "react-redux";
// 此处替换为你项目中定义signup action的实际文件路径
import { signup } from "./store/authActions";

export default function LoginForm() {
  // 用useState声明表单状态，替代类组件的this.state
  const [formData, setFormData] = useState({
    username: "",
    password: ""
  });
  const dispatch = useDispatch();

  // 用户名变更同步逻辑
  const handleUsernameChange = (e) => {
    setFormData(prev => ({
      ...prev,
      username: e.target.value
    }));
  };

  // 密码变更同步逻辑
  const handlePasswordChange = (e) => {
    setFormData(prev => ({
      ...prev,
      password: e.target.value
    }));
  };

  // 表单提交逻辑
  const handleSubmit = (e) => {
    // 阻止表单默认跳转行为
    e.preventDefault();
    dispatch(signup(formData.username, formData.password));
  };

  // 提交按钮禁用逻辑：用户名和密码均非空（去首尾空格）时才可点击
  const isSubmitDisabled = !formData.username.trim() || !formData.password.trim();

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <input
          type="text"
          value={formData.username}
          onChange={handleUsernameChange}
          id="username-input"
          placeholder="Username"
        />
      </div>
      <div className="form-group">
        <input
          type="password"
          value={formData.password}
          onChange={handlePasswordChange}
          id="password-input"
          placeholder="Password"
        />
      </div>
      <button 
        type="submit" 
        disabled={isSubmitDisabled}
      >
        Submit
      </button>
    </form>
  );
}

三、关键修改点说明 #

• 用useState钩子管理表单状态，符合函数组件语法规范，所有变量未定义报错已全部修复
• 给两个输入框绑定了value属性，实现输入内容和state的双向同步，满足你提出的前两个要求
• 新增isSubmitDisabled判断逻辑，只要用户名或密码任意一个为空（去掉首尾空格后），按钮就处于禁用状态，满足第三个要求
• 删除了错误使用的mapDispatchToProps写法，改用Redux官方推荐的useDispatch钩子触发action
• 补充了表单提交默认行为阻止逻辑，避免页面跳转
• 注意要把import { signup } from "./store/authActions"的路径替换成你自己项目里定义signup action的实际文件路径，否则还会报signup未定义的错误

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