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<{}>'.
私はコード上でコメントした2行でこのエラーを得ました。このコードは私のものでさえありません、私は反応公式サイト( https://reactjs.org/docs/forms.html )から入手しました、しかし、それはここでは機能していません。
私はcreate-react-appツールを使用しています。
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> {
...
}
@ nitzan-tomerの回答に加えて、インタフェースを使用することもできます。
interface MyProps {
...
}
interface MyState {
value: string
}
class App extends React.Component<MyProps, MyState> {
...
}
どちらかと言えば どちらでも構いません。