Methode mit Parametern durch Reagieren Requisiten übergeben?

Question

Im macht eine Komponente reagieren, die mehrere Tasten aber ich weiß nicht schafft, wie die Aktion zu behandeln, je nachdem, welche Taste gedrückt wird, ist dies die Komponente:

var SingleChoiceGroup = React.createClass({ 
    render(){ 
     var numberOfButtons = this.props.numberOfButtons; 
     var prefix = this.props.prefix; 
     var buttons = []; 

     for(var i = 0;i<numberOfButtons;i++){ 
      buttons.push(
       <Button value={i} onClick={() => this.props.selectedItem(i)}>{prefix + " " + (i+1)}</Button> 
      ); 
     } 

     return(
      <div> 
       {buttons} 
      </div> 
     ) 
    } 
}); 

Und das ist die Methode war ich das bekommen Parameter:

var AnotherComponent = React.createClass({ 
    selectedDay(i){ 
     // Here I want to read the index parameter from the other component. 
    }, 

    render(){ 
     <SingleChoiceGroup selectedItem={() => this.selectedDay()} numberOfButtons={7} prefix={"Text"}/> 
    }  
}); 

Answer 1

Es gibt zwei Probleme in Ihrem Code. Die erste ist hier:

<SingleChoiceGroup selectedItem={() => this.selectedDay()} numberOfButtons={7} prefix={"Text"}/> 

Weil Ihre selectedItem Pfeil Funktion keine Argumente übernehmen, der i Wert durch SingleChoiceGroup geben wird verloren.

Sie können dieses Problem lösen, indem es selectedItem={i => this.selectedDay(i)} verändert, sondern eher als eine Funktion übergeben, die this.selectedDay nennt, können Sie einfach this.selectedDay passieren selbst, das heißt:

<SingleChoiceGroup selectedItem={this.selectedDay} numberOfButtons={7} prefix={"Text"}/> 

Das zweite Problem, wie Bartek in darauf hingewiesen, seine Antwort ist, dass i in unserer for Schleife eine Referenz auf das gleiche Objekt in jeder Iteration der Schleife ist, und da der endgültige Wert 7 ist, das ist der Wert, den der Ereignishandler für jede Schaltfläche erhält. Es gibt eine ausführlichere Diskussion zu diesem Thema in this answer. Der TL; DR soll let anstelle von var verwenden, um die for-Schleife jedes Mal eine neue Blockbereichsvariable initialisieren zu lassen.

Hier sind diese beiden Änderungen in einem Arbeits Schnipsel:

const Button = props => <button type="button" {...props}/>; 
 

 
var SingleChoiceGroup = React.createClass({ 
 
    render(){ 
 
     var numberOfButtons = this.props.numberOfButtons; 
 
     var prefix = this.props.prefix; 
 
     var buttons = []; 
 

 
     for (let i = 0; i < numberOfButtons; i++){ 
 
      buttons.push(
 
       <Button key={i} value={i} onClick={() => this.props.selectedItem(i)}>{`${prefix} ${i+1}`}</Button> 
 
      ); 
 
     } 
 
     
 
     return <div>{buttons}</div>; 
 
    } 
 
}); 
 

 
var AnotherComponent = React.createClass({ 
 
    selectedDay(i){ 
 
     console.log('clicked %d', i); 
 
    }, 
 

 
    render(){ 
 
     return <SingleChoiceGroup selectedItem={this.selectedDay} numberOfButtons={7} prefix="Text"/> 
 
    }  
 
}); 
 

 
ReactDOM.render(<AnotherComponent/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
Click on us: <div id="container"></div>

Answer 2

In Ihrer SingleChoiceGroup Komponente Verwendung let insetad von var in for Schleife - sonst klicken Handler werden letzten Wert von i verwenden welches ist 7 in Ihrem Fall (warum? bitte sehen Sie diese SO answer für ausführliche Erklärung der Verschlüsse in for Schleifen):

for(let i = 0;i<numberOfButtons;i++){ 
     buttons.push(
      <Button value={i} onClick={() => this.props.selectedItem(i)}>{prefix + " " + (i+1)}</Button> 
     ); 
    }