原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
解读react的onClick自动触发等相关问题
目录react的onClick自动触发等问题react的onClick事件调用的各种写法与触发情况handleClick是普通函数handleClick是箭头函数总结
react的onClick自动触发等问题
react分页组件遇到的问题：
?privategetFirst(){
??const{pageNo}=this.state;
??if(pageNo3){
???return(spanthis.changePage(1)}首页/span
??}else{
???return;
??}
?privatechangePage(index:number){
??this.setState({pageNo:index});
?}
这段代码的onClick直接报错：不能将类型void分配给类型((event:MouseEventHTMLSpanElement)=void)|undefined，这个报错看得我莫名其妙
同事告诉我要给changePage函数加个return()={}形成闭包。其实后来我才发现，虽然changePage写得很像function，但其只是一个变量而已，所以并不满足onClick的内容是方法的情况。
?privategetFirst(){
??const{pageNo}=this.state;
??if(pageNo3){
???return(spanthis.changePage(1)}首页/span
??}else{
???return;
??}
?privatechangePage(index:number){
??return()={this.setState({pageNo:index});}
?}
这样写虽然不报错，但有个严重的问题，每次生成UI时它都会自动触发onClick，这个机制真是？？？所以最后改成了：
?privategetFirst(){
??const{pageNo}=this.state;
??if(pageNo3){
???return(span()=this.changePage(1)}首页/span
??}else{
???return;
??}
?privatechangePage(index:number){
??this.setState({pageNo:index});
?}
再补充一个使用的例子：
importReactfromreact;
interfaceIprops{
?name:string;
?click:any;
constButtonItem=(props:Iprops)={
?returndivprops.click}{props.name}/div
constContentMenu:React.FC{}=()={
?constproduct=(type:number)={
??return()={
???alert(type);
??}
?return(
??div
???ButtonItemname=生成1click={product(1)}/
??/div
exportdefaultContentMenu;
react的onClick事件调用的各种写法与触发情况
handleClick是普通函数
handleClick(params:any){
console.log(1000101010101010100);
console.log(params);
console.log(this)
this.handleClick}
//正确，但是无法传值
this.handleClick()}
//在handleClick():any，即声明返回值any时，不需要this.handleClick=this.handleClick.bind(this)，似乎能正确使用，能获取到this；
//在handleClick()不设置:any时，不管是否增加this.handleClick=this.handleClick.bind(this)
文档评论（0）