So rufen Sie die setState-Funktion onClick ES6 auf

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> 
     ); 
    } 
} 

Beim Klicken auf Button passiert nichts. Es gibt keine Funktion für die Schaltfläche und index.js hat eine leere Funktion hinzugefügt. warum IDK? bitte erklären

Answer 1

In diesem Fall Sie Pfeil Funktion entfernen müssen ((e) => { }), ist es nicht notwendig ist, hier, weil Sie this in constructor binden., auch innerhalb onLike Änderung this.state.like++-this.state.like + 1, weil Sie nicht Staat mutieren kann

<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

ich glaube, du bist nicht dieAufrufFunktion in der anonymen Funktion, die Sie an onClick übergeben.

Versuchen Sie folgendes:

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

Hinweis die () nach onLike.