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<{}>'.
코드에 주석 처리 한 두 줄 에이 오류가 발생했습니다. 이 코드는 내 것이 아니며 반응 공식 사이트 ( https://reactjs.org/docs/forms.html )에서 얻었지만 여기에서는 작동하지 않습니다.
create-react-app 도구를 사용하고 있습니다.
답변
는 Component
정의 과 같이 :
interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }
주 (및 props)의 기본 유형은 다음과 같습니다 {}
.
컴포넌트가 value
상태를 가지려면 다음과 같이 정의해야합니다.
class App extends React.Component<{}, { value: string }> {
...
}
또는:
type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
...
}
답변
@의 nitzan 맞춤의의 대답 외에 사용하는 옵션이 inferfaces를 :
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>(null);
...
};
일관된 한 괜찮습니다.
답변
문제는 인터페이스 상태를 선언하지 않았다는 것입니다.
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});
}
이것은 명시 적 인 것이 더 좋을지라도 상태 변수에 대한 “올바른”유형을 유추합니다.