setState関数を呼び出す方法onClick ES6方法

Question

class BlogPost extends React.Component{ 
    //getInitialState 
    constructor(){ 
     super(); 
     this.onLike = this.onLike.bind(this); 
     this.state = { 
      like :0 
     } 
    } 

    onLike(){ 
     this.setState({ 
      like: this.state.like++ 
     }); 
    } 

    render(){ 
     var postListItem = this.props.postList.map(function(post){ 
      return <li><a href="#"> {post}</a> </li> 
     }); 
     return (
      <div className="blogPost"> 
       <h2>Posts</h2> 
       <ul>{postListItem}</ul> 
       <button onClick={(e) => {this.onLike}}>{this.state.like}</button> 
      </div> 
     ); 
    } 
} 

Buttonをクリックしても何も起こりません。 ボタンには機能がなく、index.jsに空の機能が追加されました。なぜIDK？あなたは矢印機能（(e) => { }）を削除必要がある。この場合

Answer 1

を説明してくださいあなたはconstructorでthisをバインドするので、それは、ここでは必要ありません。また、onLike変更this.state.like++内this.state.like + 1にあなたが状態

を変異させることができないので、

<button onClick={ this.onLike }>{this.state.like}</button> 

class BlogPost extends React.Component{ 
 
    constructor(){ 
 
    super(); 
 
    this.onLike = this.onLike.bind(this); 
 
    
 
    this.state = { 
 
     like: 0 
 
    } 
 
    } 
 

 
    onLike(){ 
 
    this.setState({ 
 
     like: this.state.like + 1 
 
    }); 
 
    } 
 

 
    render(){ 
 
    var postListItem = this.props.postList.map(function(post){ 
 
     return <li><a href="#"> {post}</a> </li> 
 
    }); 
 
     
 
    return (
 
     <div className="blogPost"> 
 
     <h2>Posts</h2> 
 
     <ul>{ postListItem }</ul> 
 
     <button onClick={ this.onLike }>{this.state.like}</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<BlogPost postList={ [] } />, document.getElementById('container'));

<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="container"></div>

Answer 2

私はあなたがを起動していないと思いますは、onClickに渡している公式関数で機能します。

これを試してみてください：

<button onClick={(e) => {this.onLike()}}>{this.state.like}</button> 

はonLike後()に注意してください。