'읽기 전용 <{}>'유형에 'value'속성이 없습니다.

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

이것은 명시 적 인 것이 더 좋을지라도 상태 변수에 대한 "올바른"유형을 유추합니다.