好客租房24-react中的事件处理(事件绑定)

简介: 好客租房24-react中的事件处理(事件绑定)

3.1事件绑定

React事件绑定语法和DOM事件语法相似

语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}}

   //导入react

    import React from 'react'


    import ReactDOM from 'react-dom'

    //导入组件

    import Hello from './Hello'

    // 约定1:类组件必须以大写字母开头


    // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性


    // 约定3:组件必须提供render方法


    // 约定4:render方法必须有返回值

class HelloWorld extends React.Component {
         handleClick(){
             console.log("geyao")
         }
         render() {
             return (
                 <div>
                     <Hello></Hello>
                     <button onClick={this.handleClick}>点我</button>
                 </div>
             )
         }
     }
     ReactDOM.render(<HelloWorld />, document.getElementById('root'))
相关文章
|
3月前
|
前端开发 开发者 UED
【第33期】一文学会用React事件
【第33期】一文学会用React事件
21 0
|
3月前
|
前端开发 JavaScript
第九章 React中的事件处理
第九章 React中的事件处理
|
18天前
|
前端开发 JavaScript 开发者
如何在React中监听键盘事件
如何在React中监听键盘事件
26 0
|
2月前
|
前端开发 JavaScript Java
react事件机制
react事件机制
36 0
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
3月前
|
前端开发 JavaScript 开发者
说说react的事件机制?
React的事件机制是一种用于处理用户界面事件的方式,它建立在原生DOM事件的基础上,提供了一种更高级、更一致的方式来处理事件。
11 0
|
3月前
|
前端开发
React类组件中事件绑定this指向的三种方式
React类组件中事件绑定this指向的三种方式
|
3月前
|
前端开发
React中事件的绑定
React中事件的绑定
|
4月前
|
前端开发 开发者
React合成事件的原理是什么
React合成事件的原理是什么
52 0
|
4月前
|
前端开发 JavaScript UED
React事件和原生事件的执行顺序
React事件和原生事件的执行顺序
32 0