组件的定义如下:

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

这意味着状态(和道具)的默认类型是:{}。 如果你想让你的组件在状态中有值，那么你需要像这样定义它:

class App extends React.Component<{}, { value: string }> {
    ...
}

Or:

type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}

interface MyProps {
  ...
}

interface MyState {
  value: string
}

class App extends React.Component<MyProps, MyState> {
  ...
}

// Or with hooks, something like

const App = ({}: MyProps) => {
  const [value, setValue] = useState<string>('');
  ...
};

类型也很好，就像@nitzan-tomer的回答一样，只要你是一致的。

问题是您还没有声明接口状态 将任意变量替换为value的合适变量类型

这是一个很好的参考资料

interface AppProps {
   //code related to your props goes here
}

interface AppState {
   value: any
}

class App extends React.Component<AppProps, AppState> {
  // ...
}

事件。target类型为EventTarget，并不总是有值。如果它是一个DOM元素，你需要将它强制转换为正确的类型:

handleChange(event) {
    this.setState({value: (event.target as HTMLInputElement).value});
}

这将推断出状态变量的“正确”类型，尽管显式可能更好

根据ReactJs的官方文档，你需要以默认格式传递参数:

P = {} // default for your props
S = {} // default for yout state

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

或者像下面这样定义你自己的类型:(只是一个exp)

interface IProps {
    clients: Readonly<IClientModel[]>;

    onSubmit: (data: IClientModel) => void;
}

interface IState {
   clients: Readonly<IClientModel[]>;
   loading: boolean;
}

class ClientsPage extends React.Component<IProps, IState> {
  // ...
}

typescript和react组件ps的意思是什么

如何与typescript静态类型反应组件

如果你不想传递接口状态或道具模型，你可以试试这个

class App extends React.Component <any, any>

我建议使用

仅用于字符串状态值

export default class Home extends React.Component<{}, { [key: string]: string }> { }

用于字符串键和任何类型的状态值

export default class Home extends React.Component<{}, { [key: string]: any}> { }

对于任何键/任何值

export default class Home extends React.Component<{}, { [key: any]: any}> {}

我的解决方案

    import React, { ChangeEvent, FormEvent } from "react";
    
    interface NameFormProps {
    }
    
    interface NameFormState {
      value: string
    }
    
    export default class NameForm extends React.Component<NameFormProps, NameFormState> {
      constructor(props: any) {
        super(props);
        this.state = {value: ''};
    
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
    
      handleChange(event: ChangeEvent<HTMLInputElement>) {
        this.setState({value: event.target.value});
    }
    
      handleSubmit(event: FormEvent<HTMLFormElement>) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
      }
    
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Name:
              <input type="text" value={this.state.value} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }