类型“只读<{}>”上不存在属性“值”

Component is defined 像这样：

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

这意味着状态（和道具）的默认类型是：{}。
如果您希望您的组件在状态中有 value，那么您需要像这样定义它：

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

或者：

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>('');
  ...
};

type 就像在@nitzan-tomer 的回答中一样，只要您保持一致即可。

---

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

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}> {}

---

问题是你没有声明你的接口状态用你合适的“值”变量类型替换

Here is a good reference

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

interface AppState {
   value: any
}

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

---

根据官方 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 and react whats react component P S mean

how to statically type react components with typescript

---

event.target 属于 EventTarget 类型，它并不总是有值。如果它是一个 DOM 元素，则需要将其转换为正确的类型：

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

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

---

我的解决方案

    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>
        );
      }
    }

---