React报错之Property 'value' does not exist on type EventTarget的解决方法

在使用React时，可能会遇到“Property 'value' does not exist on type EventTarget”的错误。通常情况下，这意味着将事件（event）对象传递给某个函数时，事件对象的类型不正确。

要解决此错误，需要将事件对象的类型声明为React.ChangeEvent<HTMLInputElement>。

以下是详细的步骤：

1. 在组件中导入ChangeEvent类型：

import { ChangeEvent } from "react";

2. 将事件对象的类型声明为React.ChangeEvent<HTMLInputElement>：

const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
  // 在这里使用event.target.value
};

3. 在事件处理函数中使用event.target.value来获取输入框中的值：

const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
  const value = event.target.value;
  // 在这里使用value
};

通过这些步骤，即可解决错误“Property 'value' does not exist on type EventTarget”。

示例代码

import React, { useState } from "react";

const MyComponent = () => {
  const [value, setValue] = useState("");

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>{value}</p>
    </div>
  );
};

export default MyComponent;

在上面的示例代码中，handleChange函数的参数event的类型声明为ChangeEvent<HTMLInputElement>。当用户在输入框中输入内容时，handleChange函数就会被调用，然后从event.target.value中获取输入框中的值，并更新组件的状态。