是坏的不能useState或窗体

Question

我是新来的，所以我可能漏掉了什么。我试图为注册创建一个简单的表单，但似乎我无法改变状态。

`

import {useState} from 'react'


export const [inputs, setInputs] = useState({})

export  const handleChange = (event: any) => {
    const name = event.target.name
    const value = event.target.value
    setInputs(values => ({...values, [name]: value}))
  }

export  const handleSubmit = (event: any) => {
    event.preventDefault()
    console.log(inputs)
  }

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

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>
  )
}

`

在我的注册文件里

`

<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>

`

我收到了这个错误

​

​

我只是试图从电子邮件/pass和post获得用户输入到postgresql，但它说无法读取状态。

使用@sachila-ranawaka回答会产生此错误。

​

​

Answer 1

将内容移动到TextField组件中，并排除export的内容

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%'}}>

      ..........