反復でクリックして反復する

Question

クリックして+1または-1を反復できるReactでコンポーネントを作成しようとしています。 jsfiddleを見て、私がどこにいなくなったのか教えてください。 すべての可能な助けに感謝します。あなたがそこに.bind()が欠落することができように楽しみにしてい

、

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部分

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

Answer 1

を試してみてください構文エラーです。

2）あなたのクリックハンドラはthisに結合しなかった（つまり、あなたがthis.handleClickInc.bind(this)を呼び出すか、上記のような脂肪矢印構文を使用する必要がありました。

3）で述べたように、あなたがcountの状態を更新しましたが、あなたに意味更新clickCount

ここは実用的なフィドルです。すべてすべてのレンダリング要素のまあ最初

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

Answer 2

が見えます。それがなければ、thisは関数を起動するので間違ったコンテキストを持ちます。

1）あなたのreturn機能を引き起こし、括弧に包まれていませんでした。

はあなたの問題があっ

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

や、脂肪の矢印の機能は、一般的にあなたのため、この作業を行う

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

Answer 3

は戻り権利を持っている必要がありますか？だからあなたのリターンはdivをラップしています。

第2に、関数内で状態を使用するには、関数をバインドする必要があります。ステートメントをコンストラクタ内に配置するのに使用します。

あなたはこのように置くことができます：

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

は、他の機能のためにこれを作成し、それが動作します。