所以你可以看到这里的代码工作正常。但是有一个错误阻止了它的构建。检查代码
我试图将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将不胜感激。
2条答案
按热度按时间eiee3dmh1#
从您的错误消息中,我建议这样做
handleSubmit
,请将其删除handleChange
我不知道为什么要为定义
handleSubmit
函数和handleChange
函数,但我希望这能有所帮助。第一个
vhmi4jdf2#
像这样试试!