web-dev-qa-db-fra.com

Pourquoi ne puis-je pas modifier ma valeur d'entrée dans React même avec le programme d'écoute onChange

Je suis assez nouveau pour React et après avoir suivi quelques tutoriels, j’essayais sous mon code.

J'ai fabriqué un composant, je lui ai passé les accessoires d'un magasin, le componentWillMount je crée un nouvel état pour le composant. Le rendu est bon jusqu'à maintenant.

Ensuite, j'ai lié mon state à la valeur d'une zone de saisie et j'ai aussi un auditeur onChange. Pourtant, je ne peux pas changer mes valeurs sur le terrain.

Depuis, je viens de l'arrière-plan Angular, je suppose que la valeur de l'entrée de liaison, comme indiqué ci-dessous, mettra automatiquement à jour la propriété name dans l'objet state. Je me trompe 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
}

Ma fonction onTodoChange console la valeur de this qui a la même valeur d’état que lors de l’initialisation. Comment puis-je changer d'état en tapant dans les zones de saisie pour pouvoir les envoyer aux magasins?.

javascriptreactjsstateonchange
24
Saurabh Tiwari

Contrairement à Angular, dans React.js, vous devez mettre à jour l'état manuellement. Vous pouvez faire quelque chose comme ça:

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

En outre, vous pouvez définir l'état initial dans le constructeur du composant:

  constructor (props) {
    this.state = {
        updatable: false,
        name: props.name,
        status: props.status
    };
  }
41
César Landesa

vous pouvez faire un raccourci via une fonction en ligne si vous voulez simplement changer la variable d'état sans déclarer une nouvelle fonction en haut

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

En réaction, le composant ne sera rendu (ou mis à jour) que si l'état ou l'accessoire change.

Dans votre cas, vous devez mettre à jour l'état immédiatement après la modification afin que le composant effectue un nouveau rendu avec la valeur de l'état de mises à jour.

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

Dans l'état de réaction, cela ne changera pas jusqu'à ce que vous utilisiez this.setState({});. C'est pourquoi votre message de la console affiche les anciennes valeurs

1
Rohan Veer

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

vous devez ajouter ceci "this.onTodoChange = this.onTodoChange.bind (this) '

et votre fonction a event param (e) et obtient de 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});

}
1
joshua.kim