La propriété "valeur" n'existe pas sur le type " Readonly<{}>'

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

Bien, im essayant d'apprendre ReactJS parce que j'ai besoin de faire un site pour un travail de test, mais je suis confronté à quelques problèmes. Im en utilisant créez-réagir l'application de l'outil, j'ai besoin de créer un formulaire qui affiche quelque chose basé sur le retour d'une API, mais je suis confronté à des problèmes sur la création d'un formulaire, avec le code que j'ai écrit jusqu'ici, j'obtiens l'erreur suivante:

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

J'ai eu cette erreur dans les deux lignes que j'ai commenté le code. Ce code n'est pas même la mienne, je l'ai eu à partir du réagir site officiel (https://reactjs.org/docs/forms.html), mais il ne fonctionne pas ici, mon objectif était d'adapter le code mais il ne marche pas, quelqu'un s'il vous plaît aider moi

Votre problème se situe ailleurs--voir démo
je sais, son travail sur tous ces "compilateur" des sites web, mais ils m'ont conseillé de l'utiliser pour faire le projet github.com/Microsoft/TypeScript-React-Starter, et à travers le Tapuscrit compliter, il n'est pas de travail

OriginalL'auteur Luis Henrique Zimmermann | 2017-11-29

  1. 78

    La Component est défini comme suit:

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

    Ce qui signifie que le type par défaut pour l'état (et des accessoires) est: {}.

    Si vous voulez que votre composant value en l'état, alors vous devez le définir comme ceci:

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

    Ou:

    type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}
    omg, ty mec, il a travaillé maintenant, il suffit de me répondre encore une chose, cette syntaxe est lié à la Machine de droite? en raison de réagir site officiel, il n'a pas quelque chose de semblable
    Oui, c'est strictement tapuscrit liés.
    Brillant - viens jouer avec de Réagir, mais ils ont utilisé Angulaire avec TS avant et à l'absence de typage fort était vraiment ennuyeux. J'ai démarré wmonk create react app typescript dépôt github mais après j'ai ajouté quelques éléments, j'ai été faire cette erreur. Merci pour l'info!

    OriginalL'auteur Nitzan Tomer

  2. 8

    En plus de @nitzan-de tomer réponse, vous avez également la possibilité d'utiliser inferfaces:

    interface MyProps {
  ...
}

interface MyState {
  value: string
}

class App extends React.Component<MyProps, MyState> {
  ...
}

    Soit est très bien, aussi longtemps que vous êtes cohérent.

    OriginalL'auteur Leo