Pourquoi je ne peux pas changer ma valeur d'entrée dans Réagissent même avec le onChange auditeur

Je suis tout à fait nouveau pour Réagir et après avoir traversé quelques tutoriels, j'ai essayé ci-dessous le code de la mine.

J'ai fait un composant, passé accessoires à partir d'un magasin, sur componentWillMount je fais un nouvel état pour le composant. Le rendu est très bien jusqu'à maintenant.

Ensuite, j'ai lié mon state à la valeur d'une zone de saisie et j'ai onChange auditeur. Encore, je ne peux pas changer mes valeurs dans le domaine.

Depuis, je suis Angulaires de fond, je suis en supposant que la liaison d'entrée de la valeur de l'état comme ci-dessous va automatiquement mettre à jour la propriété name dans state objet. Je suis mal ici ??

componentWillMount(){
    this.setState({
        updatable : false,
        name : this.props.name,
        status : this.props.status
    });
}

//relevant DOM from component's render function
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/>

onTodoChange(){
    console.log(this);
    //consoling 'this' here, shows old values only.
    //not sure how and even if I need to update state here.
    //Do I need to pass new state to this function from DOM
    //TODO: send new data to store
}

Mon onTodoChange fonction de la console de la valeur de this qui a la même valeur de l'état que lors de l'initialisation. Comment dois-je aller sur la modification de l'état en tapant dans les boîtes de saisie, afin que je puisse les envoyer aux magasins.

OriginalL'auteur Saurabh Tiwari | 2017-01-19

  1. 28

    Contrairement au cas de la Anguleuses, dans React.js vous avez besoin de mettre à jour l'état manuellement. Vous pouvez faire quelque chose comme ceci:

    <input
    className="form-control"
    type="text" value={this.state.name}
    id={'todoName' + this.props.id}
    onChange={e => this.onTodoChange(e.target.value)}
/>

    puis dans la fonction:

    onTodoChange(value){
        this.setState({
             name: value
        });
    }

    Aussi, vous pouvez définir l'état initial dans le constructeur du Composant:

      constructor (props) {
    this.state = {
        updatable: false,
        name: props.name,
        status: props.status
    };
  }
    Merci...je suis en supposant que le constructeur reçoit props par défaut. Correcte??
    oui, c'est vrai

    OriginalL'auteur César Landesa

  2. 7

    vous pouvez faire de raccourci via la fonction en ligne si vous souhaitez simplement modifier la variable d'état sans déclarer une fonction nouvelle à haut

    <input type="text" onChange={e => this.setState({ text: e.target.value })}/>

    OriginalL'auteur Winston James Dale Fale

  3. 1

    À réagir de la composante sera de nouveau rendu(ou mise à jour) que si l'état ou la prop changements.

    Dans votre cas, vous devez mettre à jour l'état immédiatement après le changement de sorte que la composante sera de nouveau rendu avec les mises à jour de l'état de la valeur.

    onTodoChange(event){
           //update the state
          this.setState({name: event.target.value});
    }

    OriginalL'auteur StateLess

  4. 1

    À réagir état ne changera pas jusqu'à ce que vous le faites en utilisant this.setState({});
    C'est pourquoi votre message de la console montrant les anciennes valeurs

    OriginalL'auteur Rohan Veer

  5. 1

    Je pense que c'est le meilleur moyen pour u.

    vous devriez ajouter ce " ce.onTodoChange = ce.onTodoChange.bind ()'

    et votre fonction a param(e)
    et d'obtenir la valeur

    componentWillMount(){
        this.setState({
            updatable : false,
            name : this.props.name,
            status : this.props.status
        });
    this.onTodoChange = this.onTodoChange.bind(this)
    }


<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange}/>

onTodoChange(e){
         const {name, value} = e.target;
        this.setState({[name]: value});

}

    OriginalL'auteur joshua.kim