2017-07-27 1 views
0

Code Snippet zu ändern:Wert von i in Requisiten Parameter ind nicht

function Button(props) { 
    var ans = [ 
    ["56","30","11","20"],["1","-2","2","-1"], 
    ["odd","even","none","both"] 
    ]; 
    var button = [], i; 
    for(i = 0; i <= 3; i++) { 
    button.push(<button key={i} onClick={()=>props.ind(i)}> 
        {ans[props.q-1][i]} 
       </button>) 
    } 
    return (<div>{button}</div>) 
} 

Ich bin ein Neuling bei fatarrows mit und react.I mache eine quizzing interface.Here jeder der vier Tasten (i = 0 zu 3) hält eine Auswahl für eine bestimmte Frage Nr. (q) Beim Überprüfen von Web Devs fand ich, dass für jede der 4 Tasten, Wert von i in props.ind übergebene Methode ist 4, dh Wert von i nach dem letzten Inkrement.

+0

Es ist ein häufiger Fehler, den jeder JavaScript-Programmierer mindestens einmal aufgrund von Funktionsumfang der Variablen gemacht hat. Lesen Sie hierzu: https://StackOverflow.com/Questions/750486/Javascript-Closure-inside-loops-simple-practical-Beispiel –

+0

Dank @Phil Bellamy half es – Biboswan

Antwort

0

Es ist schwer zu verstehen, was Sie erreichen wollen. Wenn Sie weitere Informationen hinzufügen, kann ich Ihnen helfen.

Hier ist ein Code, der Ihnen beim Einstieg helfen kann. Es Schleifen durch die Anordnung von Fragen und dann in einer Schleife durch Antworten:

const Buttons = (props) => { 
 
    const questions = [ 
 
    ["56","30","11","20"], 
 
    ["1","-2","2","-1"], 
 
    ["odd","even","none","both"] 
 
    ]; 
 

 
    return (
 
    <div> 
 
     {questions.map((question, i) => (
 
     <div key={i}> 
 
      {question.map((answer, n) => (
 
      <button key={n} onClick={() => alert(answer)}> 
 
       {answer} 
 
      </button> 
 
     ))} 
 
     </div> 
 
    ))} 
 
    </div> 
 
); 
 
}; 
 

 
ReactDOM.render(
 
    <Buttons />, 
 
    document.getElementById('app') 
 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id="app"></div>

1

Fest Schließlich it.So i ein var variabel ist. Für jede der vier Schaltflächen, die im Button-Array gespeichert sind, wurde der Wert von i nicht in prop.ind (i) method -Parameter kopiert, stattdessen wurde die Referenz gespeichert. Daher ist der letzte Wert von i am Ende der Schleife, dh 4, was wir bekommen Für jede der HTML-Schaltfläche, propsind (4).

Jetzt statt ich deklariere lassen ich in der for-Schleife Verweisung kann nicht gespeichert werden, da es nicht zugänglich außerhalb der Schleife als Ergebnis der unmittelbare Wert von i ist in props.ind.ie props.ind (0) für 1. Taste, props.ind (1) für 2. Taste auf diese Weise.

Verwandte Themen