新的 React 框架

Question

我已经几个月没有做反应应用程序了，但是当我开始一个新的应用程序并尝试导入我的旧函数时，我收到此错误：

C:/Users/Hello/Documents/Dev/contacts/client/src/App.tsx
TypeScript error in C:/Users/Hello/Documents/Dev/contacts/client/src/App.tsx(24,28):
Property 'logUsername' does not exist on type 'Readonly<{}>'.  TS2339
handleLoginSubmit = (e: any) => {
e.preventDefault();
const user = {
username: this.state.logUsername,
password: this.state.logPassword
};
this.props.login(user);
};

这是来自全新安装的create-react-app和 NPX 创建-反应-应用程序客户端 --模板打字稿

这是我更改的唯一文件，App.tsx：

import React, { Component } from "react";
import "./App.css";
export default class App extends Component {
constructor(props: any) {
super(props);
this.state = {
username: "",
password: "",
logUsername: "",
logPassword: ""
};
}
handleChange = (e: any) => {
this.setState({
[e.target.name]: e.target.value
});
};
handleLoginSubmit = (e: any) => {
e.preventDefault();
const user = {
username: this.state.logUsername,
password: this.state.logPassword
};
this.props.login(user);
};
render() {
return (
<div className="App">
<header className="App-header">
<p>enter email to unsub from this mailing list:</p>
<form onSubmit={this.handleLoginSubmit}>
<input
className="inputs"
onChange={this.handleLoginChange}
type="text"
name="email"
value={this.state.logUsername}
placeholder="email"
/>
<button className="homeButtons" id="logInBttn">
Submit
</button>
</form>
</header>
</div>
);
}
}

Answer 1

这与打字稿有关。您必须明确说明您的属性和状态。

type AppProps = {}
type AppState = {
logUsername: string,
logPassword: string,
username: string,
password: string
}
class App extends React.Component<AppProps, AppState> {
...
}