Next.js React表单报错：无法读取输入，handleSubmit等函数未找到

问题根源 #

1. handleSubmit和handleChange仅在TextField组件内部定义，注册页面无法访问这些函数，导致报错Cannot find name 'handleSubmit'。
2. TextField组件内部维护独立的inputs状态，与注册页面状态脱节，输入内容无法同步读取。
3. TextField的value属性错误绑定为name而非传入的value参数，输入框无法正确显示父组件传递的值。
4. 注册页面中onChange和onClick写法错误：() => {handleChange}仅引用函数未执行，且未传递事件对象。

修复步骤 #

1. 重构TextField为受控组件 #

移除组件内部的状态和处理函数，仅负责渲染和传递事件：

import { useState } from 'react'

type Props = {
  label: string
  placeholder?: string
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  name?: string
  value?: string
}

export const TextField = ({ label, onChange, placeholder, name, value }: Props) => {
  return (
    <div style={{width:'100%'}}>
      <div className='text-sm my-2'>{label}</div> 
      <input
        className='border-blue-200 border-2 rounded focus:ring-blue-200 focus:border-blue-200 focus:outline-none px-2'
        style={{ height: '45px', maxWidth: '280px', width: '100%', backgroundColor: '#0D0D0D' }}
        placeholder={placeholder}
        onChange={onChange}
        name={name}
        value={value}
      />
    </div>
  )
}

2. 完善注册页面，统一管理状态与逻辑 #

在注册页面中定义状态、处理函数，并正确传递给子组件：

import { useState } from 'react'
import { TextField } from './path/to/TextField' // 替换为你的TextField实际路径
import { PrimaryButton } from './path/to/PrimaryButton' // 替换为你的PrimaryButton实际路径
import { useRouter } from 'next/router'

export default function RegisterPage() {
  const [inputs, setInputs] = useState({ email: '', password: '' })
  const router = useRouter()

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setInputs(prev => ({ ...prev, [name]: value }))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('提交数据:', inputs)
    // 此处添加注册逻辑，比如调用后端API
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className='flex flex-col flex-wrap gap-y-5'>
        <TextField 
          name="email" 
          value={inputs.email} 
          label='Enter Your email address:' 
          onChange={handleChange} 
        />
        <TextField 
          name="password" 
          value={inputs.password} 
          label='Enter Your Password:' 
          onChange={handleChange} 
        />
      </div>

      <div className='mt-7 flex items-center gap-x-2'>
        <PrimaryButton text='Register' type="submit" /> 
        <div className='text-sm'>
          Already Registered? <a onClick={() => router.push('/login')}>Login</a>
        </div>
      </div>
    </form>
  )
}

关键修复说明 #

• 将状态inputs提升到注册页面统一管理，确保父子组件数据同步。
• TextField的value绑定传入的value参数，实现受控组件逻辑。
• 注册页面的onChange直接传递handleChange函数，保证事件对象正确传递。
• 表单提交逻辑绑定到form标签的onSubmit事件，符合HTML表单规范。
• 使用Next.js官方的useRouter处理路由跳转，避免直接调用push的兼容性问题。

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