【已解决】react 点击事件自动执行?

简介: react 点击事件自动执行?

点击事件内容若是直接写Function() ,就会变成执行函数而非事件绑定,页面加载时会自动执行

class Title extends React.Component {
  render(){
      return <h1 onClick={func('页面跳转')}>{title}</h1>  
  }
}

用箭头函数装饰一下完成间接绑定即可避免:

class Title extends React.Component {
  render(){
      return <h1 onClick={() => func('页面跳转')}>{title}</h1>  
  }
}

或是:

class Title extends React.Component {
  render(){
      return <h1 onClick={func.bind(this, '页面跳转')}>{title}</h1>  
  }
}

over

相关文章
|
6月前
|
缓存 前端开发 JavaScript
【亮剑】在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用
【4月更文挑战第30天】本文介绍了在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用。使用`useState`钩子和Context API可实现状态驱动的条件渲染,通过CSS类控制组件样式,或利用React Portals在DOM不同位置渲染。性能优化应注意避免不必要的渲染、合理使用Keys、优化事件处理器、使用Memoization及清理资源。测试和验证确保逻辑正确性,以构建动态用户界面并提升应用性能。
603 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之1
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之1
56 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之7
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之7
70 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
60 0
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件上之2
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件上之2
54 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之1
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之1
46 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件上之2
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件上之2
55 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件上之1
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件上之1
60 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件上之1
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件上之1
60 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之3
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之3
52 0