Properti 'value' tidak ada pada tipe 'Readonly <{}>'

Saya perlu membuat formulir yang akan menampilkan sesuatu berdasarkan nilai pengembalian API. Saya bekerja dengan kode berikut:

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

Saya mendapatkan kesalahan berikut:

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

Saya mendapatkan kesalahan ini dalam dua baris yang saya komentari pada kode. Kode ini bahkan bukan milik saya, saya mendapatkannya dari situs resmi reaksi ( https://reactjs.org/docs/forms.html ), tetapi tidak berfungsi di sini.

Saya menggunakan alat buat-reaksi-aplikasi.

The Component didefinisikan seperti:

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

Yang berarti bahwa jenis default untuk negara (dan alat peraga) adalah: {}.
Jika Anda ingin komponen Anda memiliki valuestatus maka Anda perlu mendefinisikannya seperti ini:

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

Atau:

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

Selain jawaban @ nitzan-tomer, Anda juga memiliki opsi untuk menggunakan 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);
  ...
};

Baik-baik saja, selama Anda konsisten.

Masalahnya adalah Anda belum mendeklarasikan status antarmuka Anda menggantikan apa pun dengan jenis variabel 'nilai' yang sesuai.

Ini referensi yang bagus

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

interface AppState {
   value: any
}

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

event.targetadalah tipe EventTargetyang tidak selalu memiliki nilai. Jika elemen DOM, Anda harus melemparkannya ke jenis yang benar:

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

Ini akan menyimpulkan tipe "benar" untuk variabel keadaan juga meskipun menjadi eksplisit mungkin lebih baik