在Reactjs中的渲染中单击onClicked

所以我正在进行API调用。 我试图将

“question\u id”

放在元素的id中，其中有

className=“disessionspan”

，并希望在单击该元素后获得id。 我试着在前面放几个字符的id，这给了我一个错误，如果我把

onClick={this.likeQuestion（this，this.state.questioninfo.questionid）}

onClick已经在没有问题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);

{
“总计项目”：10，
“时间”：“2016-12-19 16:43:23.260274”，
“项目”：[
{
“问题url”：“我真的很期待新的圣诞礼物”！-when-will-they-be-added-to-the-site-724”，
“喜欢”：2，
“时间”：“2016-11-17 03:02:36”，
“答复”：[
{
“用户名”：“Vicky”，
“消息”：“我希望在下周之前添加？”，
“答复id”：1650，
“时间”：“2016-12-09 07:53:22”
},
{
“用户名”：“Siddharth Hembrom”，
“消息”：“测试”，
“答复id”：1670，
“时间”：“2016-12-14 07:15:08”
}
],
“答复总数”：2，
“位置\ url”：http://www.giftzapp.com/gifts/",
“用户名”：“Vicky”，
“信息”：“我真的在寻找一些新的圣诞礼物！它们什么时候会被添加到网站？”，
“问题编号”：724
}
导出默认类问题扩展React.Component{
建造师（道具）{
超级（道具）；
this.toggle=this.toggle.bind（this）；
此.state={
页码：1，
dropdownOpen:false，
问题信息：[]，
问题项目：[]
}
}
组件willmount（）{
var url=url；
Request.get（url）
。然后（（响应）=>{
这是我的国家({
问题信息：response.body，
问题项：response.body.Items
})
})
}
切换=（）=>{
这是我的国家({
dropdownOpen:！this.state.dropdownOpen
});
}
likeQuestion=（e）=>{
log（'单击此项'）；
//但这是行不通的
}
render（）{
var totalPage=this.state.questioninfo.total\u页面；
var currentPage=this.state.questioninfo.current\u页面；
var pgrow=[]；
对于（变量i=1；i

使用bind发送参数

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

然后功能应该是

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

---

如果不绑定，则在元素呈现时将执行所写的任何内容，因此即使未单击“绑定”发送参数，也会看到输出

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

然后功能应该是

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

---

如果不绑定，则在元素呈现时将执行您编写的任何内容，因此即使不单击，也会看到输出。您可以尝试使用ES6绑定方式

使用箭头功能：

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

返回(
this.likeQuestion（column）}>{column}
);

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

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

返回(
{column}
);

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

使用箭头功能：

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

返回(
this.likeQuestion（column）}>{column}
);

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

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

返回(
{column}
);

试试这个：

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

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

检查a、b、c值。

尝试以下方法：

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

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

---

检查a、b、c值。

它直接注销的原因是您实际上是在渲染时调用函数

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

您可以通过更改likeQuestion方法使其返回函数来解决此问题：

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

---

它直接注销的原因是因为您实际上是在render上调用函数

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

您可以通过更改likeQuestion方法使其返回函数来解决此问题：

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

---

这不是问题。OP已经绑定了map函数。@绑定map函数将使map函数可以使用它，因此您可以像这样访问likeQuestion.likeQuestion，但您仍然需要绑定onClick事件以及函数参数console.log（值“this is clicked”）应该这样做这给了一堆对象，但我找不到问题_我认为顺序应该重新排序尝试likeQuestion=（e，value）=>{console.log（value）；}这不是问题。OP已经绑定了map函数。@绑定map函数将使map函数可以使用它，因此您可以像这样访问likeQuestion.likeQuestion，但您仍然需要绑定onClick事件以及函数参数console.log（值“this is clicked”）应该这样做这给了一堆对象，但我找不到问题_我认为应该重新排序尝试likeQuestion=（e，value）=>{console.log（value）；}这是单击的[object object]