0
votes

Pourquoi ma forme simple réagissante utilise-t-elle des crochets qui ne fonctionnent pas?

J'apprends les bases des crochets de réaction pour le moment, je me demande pourquoi ce code particulier ne fonctionne pas:

function Form() {
  const [input, setInput] = useState('');
  let result = '';
  function handleSubmit(e) {
    e.preventDefault();
    result = input;
  }
  return (
    <React.Fragment>
      <h1>Form practice</h1>
      <form>
        <input type="text" onChange={(e) => setInput(e.target.value)}></input>
        <button type="submit" onClick={handleSubmit}>
          submit
        </button>
      </form>
      <h2>{result}</h2>
    </React.Fragment>
  );
}

javascript reactjs react-hooks forms

0 commentaires

3 Réponses :

2
votes

La manière dont un composant réactif sait que le RERENDER est que vous définissez l'état. La modification de la valeur d'une variable locale ne provoquera pas de rérendance. Donc, si vous voulez que le Pour changer séparément du

`, vous devrez tourner résultat dans un morceau d'état. xxx`



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     simplement parce que sur chaque rendu du composant (chaque fois que l'état change, le composant rendra à nouveau) le code s'écoule à nouveau et  résultat  code> sera défini sur Valeur 0. 
 pourquoi pas seulement rendre le  entrée  code> au lieu du résultat  (code> variable?  p> 
  p> 


function Form() {
  const [input, setInput] = useState('');

  function handleSubmit(e) {
    // do whatever you need to do to submit the form.
  }

  return (
    <React.Fragment>
      <h1>Form practice</h1>
      <form>
        <input type="text" onChange={(e) => setInput(e.target.value)}></input>
        <button type="submit" onClick={handleSubmit}>
          submit
        </button>
      </form>
      <h2>{input}</h2>
    </React.Fragment>
  );
}

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Salut YE Besoin de définir le résultat avec Usestate également, de sorte que Rendendrendez  xxx  
 u pourra voir les modifications                                  

                                                                    
                                    
                                    
                                        0 commentaires