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为什么？请解释

Answer 1

在这种情况下，你需要删除箭头功能（(e) => { }），这里没有必要，因为你绑定了this中的constructor。onLike内{更改{ {1}}到this.state.like++，因为您无法改变状态

this.state.like + 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为您没有在传递给onLike的匿名函数中调用onClick函数。

试试这个：

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

在onLike之后注意()。

如何调用setState函数onClick ES6方式

2 个答案: