2017-10-13 12 views
2

Ich versuche, eine Komponente in React zu machen, wo Sie +1 oder -1 beim Klicken iterieren könnten. Bitte schauen Sie sich jsfiddle an und sagen Sie mir, wo ich den Punkt vermisse. Vielen Dank für alle mögliche Hilfe. vorwärtsIterate auf Klick in React

Sehen,

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {clickCount: 0}; 
    console.log(this.state) 
    } 

    handleClickInc(){ 
    this.setState({count:this.state.clickCount + 1}) 
    } 

    handleClickDec(){ 
    this.setState({count:this.state.clickCount - 1}) 
    } 

render(){ 
    return 
    <div> 
     <div> 
     {this.props.clickCount} 
     </div> 
     <button onClick={this.handleClickInc}>{"+"}</button> 
     <button onClick={this.handleClickDec}>{"-"}</button> 
     </div> 
    } 

} 

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

html Teil

<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 
+0

this.setState ({** clickCount **: this.state.clickCount - 1}) – fqhv

Antwort

1

Ihre Probleme wurden:

1) Ihre return Funktion wurde in Pars nicht umgebrochen, so dass ein Syntaxfehler

2) waren Ihre Klickhandler nicht this gebunden (dh Sie this.handleClickInc.bind(this) oder verwenden Fett Pfeil Syntax zu nennen benötigt, wie oben erwähnt.

3) Wie bereits erwähnt, können Sie den Zustand der count wurden modernisiert werden, aber du gemeint Update clickCount.

Hier ist eine Arbeitsgeige.

https://jsfiddle.net/6z3cuLys/5/

0

Sieht aus wie Sie .bind() dort fehlen könnte. Ohne es hat this den falschen Kontext, wie es die Funktion auslöst.

versuchen

<button onClick={this.handleClickInc.bind(this)}>{"+"}</button> 
    <button onClick={this.handleClickDec.bind(this)}>{"-"}</button> 

oder Fett Pfeil Funktionen der Regel tun diese Arbeit für Sie

<button onClick={() => this.handleClickInc()}>{"+"}</button> 
    <button onClick={() => this.handleClickDec()}>{"-"}</button> 
0

Nun zunächst einmal alle Elemente machen müssen Rückgaberecht haben? So fehlt bei Ihrer Rückkehr die() Umhüllung der div.

Zweitens, um Status in einer Funktion zu verwenden, müssen Sie die Funktion binden. Ich verwende die Anweisung innerhalb des Konstruktors.

können Sie so:

this.handleClickInc = this.handleClickInc.bind(this); 

diese Stellen für die andere Funktion und es wird funktionieren.