接下来，js react无法读取表单的输入。

Question

我正在尝试用next.js存储表单电子邮件/密码注册，但这会导致错误。

import {useState} from 'react'




type Props = {
  label: string
  placeholder?: string
  onChange: () => void
  name?: string
  value?:  any
  
}

export const TextField = ({ label, onChange, placeholder, name, value }: Props) => {
  const [inputs, setInputs] = useState({})
  const handleChange = (event: any) => {
    const name = event.target.name
    const value = event.target.value
    setInputs(values => ({...values, [name]: value}))
  }
  const handleSubmit = (event: any) => {
    event.preventDefault()
    console.log(inputs)
  }
  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={name}
       

      />
    </div>
  )
}

我把这个放在注册文件里了

<form action="" method="post">
       <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' onClick={() => {handleSubmit}} /> 
         <div className='text-sm'>
           Already Registered? <a onClick={() => push('/login')}>Login</a>
         </div>
       </div>
       </form>

它不停地说‘无法找到名称’handleSubmit‘..ts(2304)’，它不能从另一个文件中读取输入、handleSubmit或handleChange。

Answer 1

尝试以下代码：

 onClick={handleSubmit}

或

onClick={() => handleSubmit()} 

Answer 2

首先，为什么TexField组件有handleSubmit和handleChange？

这会创建一个错误，因为如果您多次调用TexField，则将创建并多次调用handleSubmit和handleChange。

重构代码：

type FormSignup = {
  email: string;
  password: string;
}

type Props = {
  label: string
  placeholder?: string
  onChange: () => void
  name?: string
  value?:  any
}

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={name}
      />
    </div>
  )
}

const Signup = () => {
 const [inputs, setInputs] = useState<FormSignup | null>(null);

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

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    console.log(inputs)
  }

  return(
    <form onSubmit={handleSubmit}>
      <div className='flex flex-col flex-wrap gap-y-5'>
        <TextField onChange={handleChange} name="email" value={inputs?.email || ""} label='Enter Your email address:'  />
        <TextField onChange={handleChange} name="password" value={inputs?.password || ""} label='Enter Your Password:'  />
       </div>
       <div className='mt-7 flex items-center gap-x-2'>
         <PrimaryButton text='Register' type="submit" /> 
         <div className='text-sm'>
           Already Registered? <a onClick={() => push('/login')}>Login</a>
         </div>
       </div>
    </form>
  );
}