去抖不会触发功能

时间:2016-12-22 08:19:07

标签: javascript reactjs lodash

我正在研究一个React组件,我希望 function getData(){ { xmlHttp=GetXmlHttpObject(); var id=document.getElementById("input").value; var url="main.jsp"; // java.net.URLEncoder.encode(url, "UTF-8"); // url=URLEncoder.encode(url,"UTF-8"); url=url+"?input="+id; xmlHttp.onreadystatechange=stateChanged ; xmlHttp.open("GET",url,true); } xmlHttp.send(null); function stateChanged(){ if(xmlHttp.readyState===4 || xmlHttp.readyState==="complete"){ var showdata = xmlHttp.responseText; document.getElementById("input").value=showdata; } } return false; } 绑定输入。我的代码如下:

debounce

class Form extends React.Component { constructor() { ... this.deb = this.deb.bind(this); } ... this.deb() { debounce(() => { console.log('bam'); }, 400, false); } render() { return ( <input onChange={this.deb} /> ) } } 中没有debounce一切正常。我该怎么办?

1 个答案:

答案 0 :(得分:2)

debounce会为您传入的函数创建一个新的去抖动版本,因此在这种情况下您只需要在构造函数中执行一次:

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.deb = debounce(this.deb.bind(this), 400, false);
  }

  deb() {
    console.log('bam');
  }

  render() {
    return <input onChange={this.deb} />;
  }
}