前端react入门day02-React中的事件绑定与组件

这篇具有很好参考价值的文章主要介绍了前端react入门day02-React中的事件绑定与组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

目录

React中的事件绑定

React 基础事件绑定

使用事件对象参数 

传递自定义参数 

同时传递事件对象和自定义参数 

React中的组件 

组件是什么

React组件

useState 

修改状态的规则

状态不可变

修改对象状态

组件的样式处理

classnames优化类名控制 


React中的事件绑定

React 基础事件绑定

语法: on + 事件名称 = { 事件处理程序 } ,整体上遵循驼峰命名法
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

使用事件对象参数 

语法:在事件回调函数中设置形参e

前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

传递自定义参数 

语法:事件绑定的位置改造 成箭头函数的写法 ,在执行clickHandler实际处理业务函数的时候传递实参
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言
注意:不能直接写函数调用,这里事件绑定需要一个 函数引用

同时传递事件对象和自定义参数 

语法:在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应

前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

React中的组件 

组件是什么

概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次

前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用

React组件

在React中,一个组件就是 首字母大写的函数 ,内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件 当成标签书写 即可
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

useState 

useState 是一个 React Hook(函数),它允许我们向组件添加一个 状态变量 , 从而控制影响组件的渲染结果
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言
本质:和普通JS变量不同的是,状态变量一旦发生变化组件的视图UI 也会跟着变化 (数据驱动视图)
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言
// useState实现一个计数器按钮
import { useState } from 'react'
function App () {
  // 1. 调用useState添加一个状态变量
  // count 状态变量
  // setCount 修改状态变量的方法
  const [count, setCount] = useState(0)

  // 2. 点击事件回调
  const handleClick = () => {
    // 作用: 
    // 1. 用传入的新值修改count
    // 2. 重新使用新的count渲染UI
    setCount(count + 1)
  }
  return (
    <div>
      <button onClick={handleClick}>{count}</button>
    </div>
  )
}

export default App

修改状态的规则

状态不可变

在React中,状态被认为是只读的,我们应该始终 替换它而不是修改它, 直接修改状态不能引发视图更新
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言        前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

修改对象状态

 规则:对于对象类型的状态变量,应该始终传给set方法一个全新的对象来进行修改

前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言  前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

      直接修改原对象,不引发视图变化                        调用set传入新对象用于修改

组件的样式处理

React组件基础的样式控制有俩种方式文章来源地址https://www.toymoban.com/news/detail-738444.html

1. 行内样式(不推荐)
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言
2. class类名控制
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言          前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言
              index.css                                                        App.js

classnames优化类名控制 

classnames是一个简单的JS库,可以非常方便的 通过条件动态控制class类名的显示
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言
现在的问题:字符串的拼接方式不够直观,也容易出错
前端react入门day02-React中的事件绑定与组件,# 前端react入门,前端,react.js,javascript,前端框架,开发语言

到了这里,关于前端react入门day02-React中的事件绑定与组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React从入门到实战-事件处理,受控组件与非受控组件

    事件处理 通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件,而不是使用的原生DOM事件——为了更好的兼容性 React中的事件是通过事件委托方式处理的(委托给组件最外层的元素——为了更高效 通过event.target得到发生事件的DOM元素对象 收集表

    2024年02月12日
    浏览(172)
  • 前端react入门day04-useEffect与Hook函数

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 useEffect 的使用 useEffect 的概念理解 useEffect 依赖项参数说明 useEffect — 清除副作用 自定义Hook实现 React Hooks使用规则 useEffect是一个React Hook函数,用于在React组件中 创建不

    2024年01月22日
    浏览(54)
  • react——事件绑定

            react有两种写法,一种是类组件,也叫有状态组件;一种是函数式组件,也叫无状态组件,而后引入了react hooks,函数式组件也能修改状态。在这两种组件中的事件绑定的原理一样,写法不一样。这篇文章主要就是记录这两种组件中的事件绑定写法。          

    2023年04月26日
    浏览(37)
  • react 事件函数中 this 绑定问题

    在使用类方式创建组件时,类中定义一个函数,并且绑定到元素的点击事件上,此时这个函数中this指向并不是当前这个组件。 组件代码如下: 如上代码中,点击修改文本按钮,会发生如下报错 Uncaught TypeError: Cannot read properties of undefined (reading \\\'setState\\\') 提示 undefined 找不到

    2024年02月03日
    浏览(40)
  • 探索前端跨组件通信:EventBus在Vue和React中的应用

    本文作者系360奇舞团前端开发工程师 事件总线(Event Bus) 是一种用于组件间通信的模式,通常用于解决组件之间的解耦和简化通信的问题。在前端框架中,如 Vue.js,事件总线是一个常见的概念。基本上,事件总线是一个能够触发和监听事件的机制,使得组件能够在不直接依

    2024年02月02日
    浏览(67)
  • 【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化

    通过组件的生命周期来完成网络请求,网络请求的异步代码直接放在组件中 通过redux来管理异步网络请求 在store中引入中间件 redux-thunk 构建 fetchHomeMultidataAction ,将原本在组件中的异步请求代码放入到actionCreators.js中 改写原来的category.jsx,派发异步请求的dispatch 查看运行结果

    2024年02月15日
    浏览(65)
  • react和vue2/3父子组件的双向绑定

    目录 Vue3 父子传值:props(attrs)/emit 父传子 props 父child :属性名=\\\"变量\\\" 子props=defineProps({属性名:type...}) attrs父作用域(除 class、 style 、 props )属性集合 父child :属性名=\\\"变量\\\",属性名=\\\"常量\\\" 子 attrs = useAttrs() 子传父emits+@=v-on: 父child @事件名\\\"=\\\"parentClick\\\",parentClick(msg) 子emi

    2024年02月16日
    浏览(41)
  • 02react 函数组件useState的异步问题

    常见的钩子函数:useState、useEffect useState作为最常见的一个hook,在使用中总是会出现各种坑,最明显的就是 useState 更新异步的问题。 问题描述:把接口返回的数据,使用 useState 储存起来,但是当后面去改变这个数据的时候,每次拿到的都是上次的数据,无法实时更新。或者

    2024年02月03日
    浏览(47)
  • React【React是什么?、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)

           React是什么? 为什么要学习React  React开发前准备  创建React项目 

    2024年02月11日
    浏览(52)
  • 快速上手React:从概述到组件与事件处理

    「作者主页」 :雪碧有白泡泡 「个人网站」 :雪碧的个人网站 「推荐专栏」 : ★ java一站式服务 ★ ★ React从入门到精通 ★ ★ 前端炫酷代码分享 ★ ★ 从0到英雄,vue成神之路★ ★ uniapp-从构建到提升 ★ ★ 从0到英雄,vue成神之路 ★ ★ 解决算法,一个专栏就够了 ★ ★

    2024年02月13日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包