正文

#yyds干货盘点react笔记之学习之事件

author  author  2023-02-17  605

关键词：

前言

我是歌谣我有个兄弟巅峰的时候排名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
        属性值不能直接执行代码，而是需要一个回调函数：
          onclick="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 onclick="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/>);

#yyds干货盘点#react笔记之学习之完成添加功能

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情

#yyds干货盘点#react笔记之学习之双向绑定

#yyds干货盘点#react笔记之学习之state注意事项

#yyds干货盘点#react笔记之学习之useref()和dom对象

#yyds干货盘点#react笔记之学习之存储到一个state对象中

#yyds干货盘点#react笔记之学习之完成删除功能

#yyds干货盘点#react笔记之学习之空列表提示

#yyds干货盘点#react笔记之学习之props父子传值

#yyds干货盘点react笔记之项目准备

#yyds干货盘点react笔记之引入fontawesome

#yyds干货盘点react笔记之react.fragment

#yyds干货盘点react笔记之学习之props父子传值

#yyds干货盘点歌谣学前端之react中jsx

#yyds干货盘点#react前端优化小结笔记

编译阶段的优化主要是webpack开发环境时重复构建更快1.include缩小编译的范围rules:[test:/\\.js$/,use:[loader:babel-loader,options:cacheDirectory:true,persets:[@babel/preset-react],plugins:[@babel/plugin-proposal-class-properties]],i 查看详情

#yyds干货盘点歌谣学前端之react中jsx注意事项

#yyds干货盘点#前端存储之indexdb

localStorage是前端本地存储的一种，其容量一般在5M-10M左右，用来缓存一些简单的数据基本够用，毕竟定位也不是大数据量的存储。在某些场景下localStorage的容量就会有点捉襟见肘，其实浏览器是有提... 查看详情

#yyds干货盘点#spring核心之控制反转(ioc)

Spring核心之控制反转(IOC)如何理解IoCSpringBean是什么IoCContainer管理的是SpringBean，那么SpringBean是什么呢？Spring里面的bean就类似是定义的一个组件，而这个组件的作用就是实现某个功能的，这里所定义的bean就相当于给了你一个更为... 查看详情

#yyds干货盘点#linux命令之usrpskill

usr和目录结构1、/usr中的usr，指的是UnixSystemResource，而不是User。2、/usr/bin下面的都是系统预装的可执行程序，会随着系统升级而改变。3、/usr/share/bin可以通过web访问的程序一般放在这里。4、/usr/local/bin目录是给用户放置自己的可... 查看详情