Question

所以我正在进行API调用。我正在尝试将"question_id"放入有className="disussionSpan"的元素的id中，并希望获得id的onClick。我尝试在前面添加带有少量字符的id，这给了我错误，如果我把onClick={this.likeQuestion(this,this.state.questioninfo.question_id)} onClick已经安装了没有question_id的日志。在Reactjs再次出现我希望我说清楚。我想在onClick上控制问题ID。

所以当我跑这个。未单击onClick函数并已显示控制台日志我看到控制台已经超过了

 - 2 this is clicked 
 - 2 this is clicked 
 - 6 this is clicked

这是我的json回复。总共有10个项目。

     {
  "total_Item": 10,
  "time": "2016-12-19 16:43:23.260274",
  "Items": [
    {
      "question_url": "i-am-really-looking-fwd-to-some-new-christmas-gifts-!-when-will-they-be-added-to-the-site-724",
      "likes": 2,
      "time": "2016-11-17 03:02:36",
      "replies": [
        {
          "user_name": "Vicky",
          "message": "ihope they are added by next week?",
          "reply_id": 1650,
          "time": "2016-12-09 07:53:22"
        },
        {
          "user_name": "Siddharth Hembrom",
          "message": "test",
          "reply_id": 1670,
          "time": "2016-12-14 07:15:08"
        }
      ],
      "total_replies": 2,
      "location_url": "http://www.giftzapp.com/gifts/",
      "user_name": "Vicky",
      "message": "I am really looking fwd to some new christmas gifts ! When will they be added to the site?",
      "question_id": 724

}

export default class Question extends React.Component {
  constructor(props){
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
        pageNo : 1,
        dropdownOpen: false,
        questioninfo : [],
        questionItem: []
      }
  }
  componentWillMount(){
    var url = url;
    Request.get(url)
             .then((response) => {
              this.setState({
                questioninfo: response.body,
                questionItem: response.body.Items
              })
            })
  }



  toggle = () => {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

  likeQuestion = (e) => {
      console.log('this is clicked');
      //But this is not working
   }

  render() {
      var totalPage = this.state.questioninfo.total_pages;
      var currentPage = this.state.questioninfo.current_page;


      var pgrow = [];

      for (var i = 1; i < totalPage; i++) {
          pgrow.push(<DropdownItem  onClick={this.gotoPage.bind(this, i)} key={i}>{i}</DropdownItem>);
      }
         //console.log("filter work in progress "+this.state.questioninfo.data);
        var canvases = this.state.questionItem.map(function(data,i) {
            var qid = data.question_id;
          var firstLtr = data.user_name.charAt(0);
{

            return (
               <div key={i}>
                     <Col sm="12" md={{ size: 12, offset: 2 }} className="questionCard">
                      <Card block>
                        <CardTitle>
                                    <div className="outerCircle"><span>{firstLtr}</span></div> {data.user_name}
                                    <i className="fa fa-flag-o flagging" aria-hidden="true"></i>
                                    <a href={data.location_url} target="_blank" className="questionLocation">{data.location_url}</a>
                        </CardTitle>
                        <CardText className="questionTxt">{data.message}</CardText>
                        <div>
                              <Button className="replyBtn">
                                <Link to={`questionReply/${data.question_id}/${data.question_url}`}>
                                  {data.total_replies} Discussions
                                </Link>
                              </Button>
                             <Button size="sm" color="link" className="disussionSpan" id="likeQues{this.state.questioninfo.question_id}" onClick={this.likeQuestion(this,this.state.questioninfo.question_id)}>{data.likes} Likes</Button>
                        </div>
                      </Card>
                    </Col>
               </div>
            );
          }

       },this);

Answer 1

利用bind发送参数

onClick={this.likeQuestion.bind(this,this.state.questioninfo.question_id)}

然后功能应该是

likeQuestion = (value, e) => {
      console.log('this is clicked');
      //But this is not working
   }

如果你没有绑定，那么无论你写什么都会在元素呈现时执行，因此即使你没有点击也会看到输出

Answer 2

您可以尝试使用ES6绑定方式

使用箭头功能：

return (
  <th value={column} onClick={that.likeQuestion.bind(that, column)}>{column}</th>
);

或者如果你想使用ES5，那么也需要在构造函数中绑定。

{{1}}

Answer 3

试试这个：

onClick={this.likeQuestion.bind(this,this.state.questioninfo.question_id)}

likeQuestion(a,b,c){
   console.log(a,b,c);
}

检查a，b，c值。

Answer 4

它立即退出的原因是因为你实际上是在渲染上调用该函数。

onClick={this.likeQuestion.bind(this,this.state.questioninfo.question_id)}

您可以通过更改likeQuestion方法来解决此问题，以便返回一个函数：

likeQuestion(id, e) {
  return () => {
    console.log('this is clicked', id);
  }
}

正在点击Reactjs

4 个答案: