ReactNextjs壞了，無法使用狀態或表單-有解無憂

我是新來的，所以也許我錯過了什么。我正在嘗試創建簡單的注冊表格，但似乎無法更改狀態。

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>

我收到這個錯誤

React Nextjs 壞了，無法使用狀態或表單

我只是想從電子郵件/密碼中獲取用戶輸入并發布到 postgresql 資料庫，但它說無法讀取狀態

使用@sachila-ranawaka 答案會產生此錯誤

React Nextjs 壞了，無法使用狀態或表單

uj5u.com熱心網友回復：

移動組件內部的TextField內容并排除exports

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

      ..........

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/535307.html

標籤：反应打字稿postgresql棱镜下一个

上一篇：在嵌套的JSON中搜索和替換鍵的值

下一篇：獲取Postgressql中給定輸入時間戳的前幾天值的平均值