reactjs 无法在Next.js应用程序中处理onChange/将onChange分配给onChange

gkn4icbw  于 2022-11-29  发布在  React
关注(0)|答案(2)|浏览(134)

所以你可以看到这里的代码工作正常。但是有一个错误阻止了它的构建。检查代码
我试图将onChange分配给onChange,这样当用户按下一个键时,它将显示在文本字段中。目前使用onChange={onChange},它在浏览器和运行开发中工作,但不会构建。当我找到任何解决方案/更改时,它等于浏览器中断或停止接受文本输入。非常令人沮丧,这是我最不需要部署应用程序的事情。

import {useState} from 'react'


type Props = {
  label: string
  placeholder?: string
  onChange: (e?: Event) => 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={value}
       

      />
    </div>
  )
}

并且存在以下错误

[{
    "resource": "/d:/dropship/src/components/TextFiled.tsx",
    "owner": "typescript",
    "code": "2322",
    "severity": 8,
    "message": "Type '(e?: Event | undefined) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'.\n  Types of parameters 'e' and 'event' are incompatible.\n    Type 'ChangeEvent<HTMLInputElement>' is missing the following properties from type 'Event': cancelBubble, composed, returnValue, srcElement, and 7 more.",
    "source": "ts",
    "startLineNumber": 33,
    "startColumn": 9,
    "endLineNumber": 33,
    "endColumn": 17,
    "relatedInformation": [
        {
            "startLineNumber": 2254,
            "startColumn": 9,
            "endLineNumber": 2254,
            "endColumn": 17,
            "message": "The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'",
            "resource": "/d:/dropship/node_modules/@types/react/index.d.ts"
        }
    ]
},{
    "resource": "/d:/dropship/src/components/TextFiled.tsx",
    "owner": "typescript",
    "code": "6133",
    "severity": 4,
    "message": "'handleChange' is declared but its value is never read.",
    "source": "ts",
    "startLineNumber": 17,
    "startColumn": 9,
    "endLineNumber": 17,
    "endColumn": 21,
    "tags": [
        1
    ]
},{
    "resource": "/d:/dropship/src/components/TextFiled.tsx",
    "owner": "typescript",
    "code": "6133",
    "severity": 4,
    "message": "'handleSubmit' is declared but its value is never read.",
    "source": "ts",
    "startLineNumber": 22,
    "startColumn": 9,
    "endLineNumber": 22,
    "endColumn": 21,
    "tags": [
        1
    ]
}]

我已经尝试了许多改变,但我不能让这个错误消失。如果有人是ReactMaven将不胜感激。

eiee3dmh

eiee3dmh1#

从您的错误消息中,我建议这样做

  • 如果不使用handleSubmit,请将其删除
  • 删除handleChange

我不知道为什么要为定义handleSubmit函数和handleChange函数,但我希望这能有所帮助。
第一个

vhmi4jdf

vhmi4jdf2#

像这样试试!

onChange={handleChange}

相关问题