React组件创建与事件绑定的实现方法
更新时间：2022年12月26日 10:28:04 作者：梦幻通灵
react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
周末在家，练习React，记录下来，方便查看。
本期学习React组件创建与时间绑定
1、组件创建方式
方式一-函数创建组件
使用JS函数或箭头函数创建组件
约定1：函数名必须是大写字母开头
约定2：函数组件必须有返回值，表示该组件的结构
如果返回值为null，则不渲染任何内容
参考代码如下图所示。
// 方式1：JS函数
function Hello(){
return (
<div>函数组件</div>
)
}
// 方式2：箭头函数
const Hello = () => <div>函数组件</div>
// 渲染函数组件
ReactDOM.render(<hello />,document.getElementById('root'))
方式二-使用类创建组件
使用ES6的class创建的组件
约定1：类名必须是大写字母开头；
约定2: 类组件应该继承 React.Component 父类，可使用父类提供的方法和属性；
约定3：类组件必须提供render() 方法；
约定4：render 方法必须有返回值，表示该组件结构。
参考代码如下图所示。
class Hello extends React.Component {
render(){
return <div>类组件</div>
}
}
// 渲染函数组件
ReactDOM.render(<hello />,document.getElementById('root'))
2、事件绑定
React 事件绑定与DOM时间语法相似。
语法：on+事件名称={事件处理程序} 如 onClick={() => {}}
注意：React 事件采用驼峰命名法，如 onMouseEnter
方式一-类组件绑定事件
通过 this 关键字 获取事件处理程序。
// 类组件绑定事件
class APP extends React.Component{
// 事件处理程序
handleClick(){
console.log('类组件中事件处理函数')
}
render() {
return (
<button onclick={this.handleClick}>点我</button>
)
}
}
方式二-函数组件绑定事件
函数定义用 function，直接通过 函数名 即可获取事件处理程序。
// 函数组件绑定事件
function APP(){
// 事件处理程序
function handleClick(){
console.log('函数组件中事件处理函数')
}
return (
<button onclick={handleClick}>点我</button>
)
}
// 渲染函数组件
ReactDOM.render(<APP />,document.getElementById('root'))
到此这篇关于React组件创建与事件绑定的实现方法的文章就介绍到这了,更多相关React组件创建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了React构建组件的几种方式及区别，组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念来实现开发的模式文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
这篇文章主要介绍了react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面,需要的朋友可以参考下2019-11-11
函数式组件的基本意义就是,组件实际上是一个函数,不是类,下面这篇文章主要给大家介绍了关于React中函数组件与类的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了深入浅析react native es6语法的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了React配置代理方式(proxy),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了react hooks实现防抖节流的几种方法,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-04-04
这篇文章主要为大家介绍了每天学习一个hooks useMount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了react.js框架Redux基础案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
Redux Toolkit可以帮助开发者更快速、更高效地编写Redux应用,本文主要介绍了React使用Redux Toolkit的方法示例,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
这些天也都在面试,面试的内容也大多千篇一律,无外乎vue、react这些框架的一些原理,和使用方法,但是也遇到些有趣的题目,这篇文章主要给大家介绍了关于React经典面试题之倒计时组件的相关资料,需要的朋友可以参考下2022-03-03
最新评论