地产& # 39;价值# 39;在类型'Readonly<{}>

我需要创建一个表单，该表单将根据API的返回值显示某些内容。我正在使用以下代码:

class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};


this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}


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


handleSubmit(event) {
alert('A name was submitted: ' + this.state.value); //error here
event.preventDefault();
}


render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} /> // error here
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

我得到以下错误:

error TS2339: Property 'value' does not exist on type 'Readonly<{}>'.

我在代码上注释的两行中得到了这个错误。这段代码甚至不是我的，我从react官方网站(https://reactjs.org/docs/forms.html)得到它，但它在这里不能工作。

我正在使用创建-反应-应用程序工具。

230795 次浏览
小开

Component 定义如下所示:

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的回答一样，只要你是一致的。

小开
问题是你还没有声明你的接口状态 将任意变量替换为'value'

的合适变量类型

< a href = " https://charles-bryant.gitbook。这是一个很好的参考 . io/hello-react-and-typescript/" rel="noreferrer">

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


interface AppState {
value: any
}


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

event.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是什么反应组件P S的意思

如何用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>
);
}
}

提交答案