react笔记之学习之事件

简介: react笔记之学习之事件

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

react事件案例代码

const App = () => {
    const clickHandler = (event) => {
        event.preventDefault(); // 取消默认行为
        event.stopPropagation(); // 取消事件的冒泡
        alert('我是App中的clickHandler!');
        /*
        *     在React中,无法通过return false取消默认行为
        *     return false;
        *
        *     事件对象
        *         - React事件中同样会传递事件对象,可以在响应函数中定义参数来接收事件对象
        *         - React中的事件对象同样不是原生的事件对象,是经过React包装后的事件对象
        *         - 由于对象进行过包装,所以使用过程中我们无需再去考虑兼容性问题
        * */
    };
    return <div
        onClick={() => {
            alert('div');
        }}
        style={{width: 200, height: 200, margin: '100px auto', backgroundColor:'#bfa'}}>
        {/*
      在React中事件需要通过元素的属性来设置,
        和原生JS不同,在React中事件的属性需要使用驼峰命名法:
           onclick -> onClick
           onchange -> onChange
        属性值不能直接执行代码,而是需要一个回调函数:
          οnclick="alert(123)"
          onClick={()=>{alert(123)}}
    */}
        <button onClick={() => {
            alert(123);
        }}>点我一下
        </button>
        <button onClick={clickHandler}>哈哈</button>
        <br/>
        <a href="https://www.baidu.com" onClick={clickHandler}>超链接</a>
    </div>
};
/*
*   <button οnclick="alert(123)">点我一下</button>
*
*   <button id="btn01">点我一下</button>
*
*   document.getElementById('btn01').onclick = function(){};
*   document.getElementById('btn01').addEventListener('click', function(){}, false);
*
*
* */
// 导出App
export default App;

基本样式文件

/*设置基本样式*/
*{
    box-sizing: border-box;
}
/*设置body的样式*/
body{
    background-color: #DFDFDF;
    margin: 0;
}

入口文件index.js

import ReactDOM from "react-dom/client";
import App from "./App";
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
// React组件可以直接通过JSX渲染
root.render(<App/>);
相关文章
|
11天前
|
JSON 前端开发 JavaScript
|
8天前
|
前端开发 JavaScript Java
React 中的合成事件
【8月更文挑战第30天】
20 6
|
13天前
|
前端开发 JavaScript 数据处理
如何学习React的高级概念?
【8月更文挑战第26天】如何学习React的高级概念?
24 2
|
13天前
|
前端开发 JavaScript API
学习 React 的方法
【8月更文挑战第26天】学习 React 的方法
26 1
|
19天前
|
存储 前端开发 JavaScript
React中的事件处理(八)
【8月更文挑战第15天】React中的事件处理
28 1
|
30天前
|
前端开发 JavaScript 算法
如何学习react原理
【8月更文挑战第9天】 如何学习react原理
34 6
|
8天前
|
前端开发 JavaScript 开发者
如何在 React 中处理事件?
【8月更文挑战第31天】
18 0
|
8天前
|
前端开发 JavaScript
React 中的事件是什么?
【8月更文挑战第30天】
27 0
|
23天前
|
前端开发 JavaScript API
React学习-初始化react项目
【8月更文挑战第16天】
|
26天前
|
移动开发 API UED
React-Router 基础学习
React-Router 基础学习
23 0

热门文章

最新文章

下一篇
DDNS