J'essaie de comparer la valeur actuelle avec la valeur précédente, qui est entrée dans la zone de texte. Mais la variable ne stocke pas la valeur.
Déclaration de la variable Je ne suis pas sûr de savoir pourquoi son événement, quand je déplace le Voici le code ci-dessous et aussi dans codesandbox question: pourquoi CurrentVal Pour stocker la valeur initiale et modifier CurrentVal Valeur via Onchange pour stocker la dernière valeur , mais sa valeur ne stocke pas la valeur. Currentval fonction supérieure fonction entrée Son stockage de la valeur Et tout fonctionne bien. Mais je dois stocker l'argument d'entrée comme valeur initiale. CurrentVal < / code> ne pas tenir / stocker la valeur mise à jour?
3 Réponses :
Je n'ai aucune idée de la méthode USESTE () pour que j'ai commenté cette ligne. La valeur de saisie de texte n'est pas mise à jour car la méthode de retour d'entrée ne rend pas après la mise à jour de la valeur de CurrentVal, de sorte que j'ai réussi la méthode UpdateValue () dans le composant d'entrée de la composante parent, sa mise à jour de l'état puis rendait le composant de parent à l'enfant avec mis à jour. valeur.
const Input = ({ initialValue = "20", updateValue }) => {
// const [value, updateValue] = useState(initialValue);
var value = initialValue;
var currentVal = initialValue;
const update = event => {
console.log("currentVal at Step : 1 ::", currentVal);
var x = event.target.value;
if (currentVal !== x) {
currentVal = x;
console.log("Inside Loop :: currentVal at Step : 2 ::", currentVal);
value = currentVal;
updateValue(currentVal);
} else {
updateValue(currentVal);
}
};
return (
<>
Data :: {value} <br />
<br />
<input type="text" value={value} onChange={e => update(e)} />
</>
);
};
class App extends Component {
constructor() {
super();
this.state = {
};
this.updateValue = this.updateValue.bind(this);
}
updateValue(currentVal){
this.setState({value: currentVal})
}
render() {
return (
<div className="App">
<h1> Data Test ! </h1>
<Input updateValue={this.updateValue} initialValue={this.state.value} />
</div>
);
}
}
Cela a également résolu mon problème, contraignant sur le composant parent. Merci
var currentVal = value || initialValue; Not sure if i understand your question correctly but assuming you only want to use the initial value if its present and continue using changed value afterwards I think this is what you want to do ?Note the initial post was later changed with a follow up question. Answer to it is in the comments below however I would put it here as well for easy reference.. It's because the component is being re-rendered on each change , think of it like the function being called on each render and only state it remembers is the state updated by using the updateValue() on the hook method. Anything else is just variables on function that gets reset/ reinitialized on each render
Solution fonctionne, mais ma question est pourquoi CurrentVal ne tenant pas / stocker la valeur mise à jour? , j'ai également révisé la question.
C'est parce que le composant est rendu à nouveau sur chaque changement, pensez-y, comme la fonction étant appelée à chaque rendu et que l'état qu'il se souvient que l'État est mis à jour en utilisant l'updateValue () sur la méthode de la hameçon. Tout ce que d'autre n'est que des variables sur la fonction qui se réinitialise / réinitialisée sur chaque rendu
Seul Etat On se souvient que l'état mis à jour à l'aide de l'updateValue () ... Oh oui, merci
NP content que cela ait aidé :)
L'entrée du composant contient la valeur initialeValue comme 20 attribuée à Courroval et la valeur de la balise d'entrée est attribuée à la fonction de mise à jour de courage courageval, puis metcipitévalue appelée à nouveau, elle a été à nouveau attribuée au courant actuel, c'est pourquoi il ne mettait pas à jour le courant actuel. ,
import React, { useState, Component, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
var state = {
currentVal: 0
};
const Input = () => {
const [value, updateValue] = useState(20);
const update = event => {
var x = event.target.value;
if (value !== x) {
updateValue(x);
state.currentVal = x;
} else {
updateValue(value);
state.currentVal = value;
}
};
return (
<div>
Data :: {value} || CurrentVal :: {state.currentVal} <br />
<br />
<input type="text" value={value} onChange={e => update(e)} />
</div>
);
};
class App extends Component {
render() {
return (
<div className="App">
<h1> Data Test ! </h1>
<Input />
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);