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

Question

你看这里的代码很好用。但是，有一些错误阻止了be构建它。检查代码

我试图将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
    ]
}]

我尝试了许多修改，但是我无法让这个错误消失。如果有人是反应专家，我们将不胜感激。

Answer 1

根据您的错误信息，我建议您

如果您不使用

• Remove handleSubmit，则
• 删除handleSubmit

我不知道为什么您定义了handleSubmit函数和handleChange函数，但我希望这会有所帮助。

​

import { ChangeEvent, 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 targetName = event.target.name;
    const targetValue = event.target.value;
    setInputs((values) => ({ ...values, [targetName]: targetValue }));
    onChange(event);
  };
  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={handleChange}
        name={name}
        value={value}
      />
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

Answer 2

像这样试试！

onChange={handleChange}