React TypeScript: onChange的正确类型

在React TypeScript中，onChange事件处理函数的正确类型取决于你所使用的输入元素的类型

import React, { ChangeEvent, useState } from "react";

const MyComponent: React.FC = () => {
  const [value, setValue] = useState<string>("");

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

  return <input type="text" value={value} onChange={handleChange} />;
};

export default MyComponent;

在这个例子中，我们定义了一个名为 handleChange 的函数，该函数接受一个类型为 ChangeEvent<HTMLInputElement> 的参数。然后，通过 event.target.value 获取输入框的值，并将其存储在状态变量 value 中。

注意：这个例子使用了React Hooks（useState），因此需要导入 React 和 useState。如果你在使用 React 类组件，可以使用以下代码：

import React, { Component } from "react";

interface MyComponentState {
  value: string;
}

class MyComponent extends Component<{}, MyComponentState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      value: "",
    };
  }

  handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    this.setState({ value: event.target.value });
  };

  render() {
    return <input type="text" value={this.state.value} onChange={this.handleChange} />;
  }
}

export default MyComponent;

在这个例子中，我们使用了 React.ChangeEvent<HTMLInputElement> 类型来定义 handleChange 函数的参数类型。