反应OnClick函数不绑定

我有一个onClick处理程序绑定到currentAreas组件。当currentAreas组件被调用时，同时调用onClick处理程序，但在此之后不起作用。反应OnClick函数不绑定

onClick当我尝试点击锚标签时不起作用，我认为这可能是由于我绑定onClick函数的方式。

currentAreas.js

import React, { Component, PropTypes } from 'react'; 

export default class currentAreas extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { onClick } = this.props; 

    return(
     <div className="list-group panel"> 
      <a href="#demo3" className="list-group-item" onClick={onClick("All", "All")} >All</a> 

     </div> 
    ); 
    } 
}

currentList.js（主要成分）

class currentList extends Component { 
    constructor(props) { 
     super(props); 

     this.updateLocation = this.updateLocation.bind(this); 
    } 

    updateLocation(name, nameLocation){ 
    console.log(name); 
    console.log(nameLocation); 
    } 

    render() { 
     return (
      <div className="step-3-container"> 

      <CurrentAreas 
       onClick ={this.updateLocation} /> 
     </div> 
    ) 
    } 
    }

来源

2016-07-07 lost9123193

每当JavaScript解释器“看到”一个“（）”时，它都会尝试执行“（）”之前的函数。因此，你的代码实际上是在执行执行onClick（来自props的那个），以参数“All”和“All”的形式传递。所以，你需要做的是，不要自己调用它，让onClick处理程序调用它。

换句话说，onClick道具必须收到function。

一个可能的解决方案是你的onClick包装成一个箭头的功能，做这样的事情：

<a href="#demo3" onClick={() => onClick("All", "All")}>All</a>

或者，您可以bind的参数，以你的函数（绑定返回一个函数，所以它会合身在onClick）。

<a href="#demo3" onClick={onClick.bind(null, "All", "All")}>All</a>

第一bind参数是绑定函数内this值。

FMI约bind：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

来源

2016-07-07 03:16:07

特殊照顾的组分，其可能意味着您选择触发它来进行呈现的声明期间执行的函数，而不是单击

onClick={onClick("All", "All")}

需要是

onClick={onClick.bind(null, "All", "All")}

或

onClick={function(){ onClick("All", "All"); }}

一个反应组分的onClick需要可以执行回呼。您传递的返回值为this.props.onClick，因为您立即用参数调用它

来源

2016-07-07 03:13:40 PhilVarg

反应OnClick函数不绑定

回答

相关问题