Thuộc tính 'giá trị' không tồn tại trên loại 'Chỉ đọc <{}>'

Tôi cần tạo một biểu mẫu sẽ hiển thị một cái gì đó dựa trên giá trị trả về của API. Tôi đang làm việc với đoạn mã sau:

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

Tôi nhận được lỗi sau:

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

Tôi đã nhận được lỗi này trong hai dòng tôi nhận xét về mã. Mã này thậm chí không phải của tôi, tôi đã nhận được nó từ trang web chính thức phản ứng ( https://reactjs.org/docs/forms.html ), nhưng nó không hoạt động ở đây.

Tôi đang sử dụng công cụ tạo ứng dụng.

Các Component được định nghĩa như sau:

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

Có nghĩa là loại mặc định cho trạng thái (và đạo cụ) là : {}.
Nếu bạn muốn thành phần của mình có valuetrạng thái thì bạn cần xác định nó như thế này:

class App extends React.Component<{}, { value: string }> {
    ...
}

Hoặc là:

type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}

Ngoài câu trả lời @ Nitzan-Tomer, bạn cũng có tùy chọn để sử dụng 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);
  ...
};

Hoặc là tốt, miễn là bạn nhất quán.

Vấn đề là bạn chưa khai báo trạng thái giao diện của bạn thay thế bất kỳ bằng loại biến 'giá trị' phù hợp của bạn

Đây là một tài liệu tham khảo tốt

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

interface AppState {
   value: any
}

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

event.targetthuộc loại EventTargetkhông phải lúc nào cũng có giá trị. Nếu đó là một phần tử DOM, bạn cần chuyển nó thành đúng loại:

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

Điều này cũng sẽ suy ra kiểu "chính xác" cho biến trạng thái mặc dù rõ ràng có lẽ tốt hơn