react基础,操作属性样式事件。事件处理this指向问题,及案例

news2024/11/15 18:49:20

1.1 React 起源于 Facebook 于2013年5月开源.
是一个用于构建用户界面的 JavaScript 库, 与vue,angular并称前端三大框架,现在最新版本是18

特点:-数据驱动(操作数据) - 组件化 - 虚拟DOM

开发环境:

  • cdn引入js

<script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
    <script src="./node_modules/babel-standalone/babel.js"></script>

  • 脚手架
  • webpack手动搭建

第一个react程序:

<body>
    <div id="root">
         
    </div>
    <!-- 必须要按这个顺序引入 -->
    <script src="../lib/react.development.js"></script>
    <script src="../lib//react-dom.development.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
        const message="我的第一个React"
        const user={name:'jack',age:18}
        const element=(
            <div>
                <h2>{message}</h2>
                <p>{user.name}-{user.age}</p>
           </div>
        )
        ReactDOM.render(element,document.getElementById('root'))
</script>
</body>

如果要在element里面写注释的话:{/*我是注释  */}

jsx语法:

    在以上的代码中,其实我们已经运用 jsx语法,那jsx语法到底是什么呢?

- 必须只能有一个根节点
- 多标签换行显示时写到一个小括号中 
- 单标签不能省略结束标签。/>
- 遇到 HTML 标签 (以 < 开头) 就用 HTML 规则解析
- 遇到代码块(以 { 开头),就用 JavaScript 规则解析
- JSX 允许直接在模板中插入一个 JavaScript 表达式
 

 react操作元素内容,样式,属性,事件

  <body>
    <div id="root"></div>
    <!-- 必须要按这个顺序引入 -->
    <script src="../lib/react.development.js"></script>
    <script src="../lib//react-dom.development.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
      const title = "react元素操作";
      const url = "http://www.baidu.com";
      const pic =
        "https://img0.baidu.com/it/u=1472391233,99561733&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676394000&t=ab66e9b81c775a97854704a561505508";
      const style1 = { color: "pink", backgroundColor: "red", width: "200px" };

      const isOk = true;

      function bindHander(){
        console.log('触发事件')
      }
      const element = (
        <div>
          {/*操作内容*/}
          <h2>{title}</h2>
          {/*操作属性*/}
          <a href={url}>百度</a>
          {/*操作属性,样式*/}
          <img src={pic} style={{ height: "100px" }} />
          {/*操作样式方法二*/}
          <p style={style1}>这是操作我的样式</p>
          {/*三元运算*/}
          {isOk ? "成功" : "失败"}
            {/*操作事件*/}
          <button style={{height:'30px',width:'60px'}} onClick={bindHander}></button>
        </div>
      );
      ReactDOM.render(element, document.getElementById("root"));
    </script>
  </body>

 Fragments:React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。

render(){
return (
<React.Fragment>

//此处相当于是模版字符串

</React.Fragment>
)}

 

组件:函数组件,类组件

函数组件:

  • 定义函数的第一个字母大写
  • 可以定义一个props形参。用于从外部向组件内传入数据
  • 组件内返回描述UI界面的React元素,按jsx语法实现

类组件:

  • 继承React.Component
  • render方法返回描述UI界面的React元素

State:

操作组件内部状态数据,使用state
注: 在hooks出现之前,只能在类组件中使用
 1. 获取state数据  this.state.***
 2. 更新state数据  this.setState({age:20})

 

事件处理&this指向问题:

语法:
on+事件类型名= {事件处理函数}
如: onClick={()=>{}}
    onFocus, onInput ...
注: 使用箭头函数,避免this指向问题

<body>
    <div id="root"> </div>

    <script type="text/babel">

        class EventDemo extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    count: 0
                }

                // 绑定事件
                // this.bindPlus = this.bindPlus.bind(this)
            }
            render() {
                return (
                    <React.Fragment>
                        <h2>事件处理</h2>
                        <p>count: {this.state.count}</p>
                        {/* 第一种事件处理方式 */}
                        {/*<button onClick={this.bindPlus.bind(this)}>加一</button>*/}

                        {/* 第二种事件处理方式 */}
                        {/*<button onClick={this.bindPlus}>加一</button>*/}

                        {/* 第三种事件处理方式 */}
                        {/*<button onClick={ this.bindPlus}>加一</button>*/}

                        {/* 第四种事件处理方式 */}
                        <button onClick={ ()=>{this.bindPlus(10)}}>加一</button>

                    </React.Fragment>
                )
            }
            
            bindPlus = (num) => {
                this.setState({ count: num })
            }
        }

        ReactDOM.render(<EventDemo />, document.getElementById('root'))
    </script>
</body>

</html>

案例:

<body>
    <div id="root"></div>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.js"></script>


    <script type ="text/babel" >
        class Welcom extends React.Component {
          constructor(props) {
            super(props)
            this.state = {
             list:[
              { id: "1001", name: "C++", price: 89 },
              { id: "1002", name: "C", price: 39 },
              { id: "1003", name: "java", price: 56 }
            ],
            inputValue:''
            }
          }
          render() {
           return(
            <React.Fragment>
                <input type="text" placeholder='请输入书名' value={this.state.inputValue} onInput={this.bindInputValue}/>
                <button onClick={this.bindAddConfirm}>确定</button>
                {this.state.list.map((item,index)=>{
                    return(
                        <div key={item.id}>
                            <input type='checkbox' checked={item.state} onChange={()=>{
                                this.bindChange(item.id)
                            }}/>

                            {item.id}-{item.name}  

                            <input type="button" value='删除' onClick={()=>{
                                this.bindDelete(index)
                            }}/>

                            {item.state?'选中':'未选中'}  
                        </div>
                    )
                })}
              
            </React.Fragment>
           )
          }

          bindInputValue=(e)=>{
             const inputValue=e.target.value
             this.setState({inputValue})
          }

          bindAddConfirm=()=>{
            const {inputValue,list} =this.state
            list.push({
                id:Math.floor(Math.random)*10,
                name:inputValue,
                state:false
            })
            // 更新
            this.setState({inputValue:'',list})
          }

        //   删除
        bindDelete=(index)=>{
            const {list} =this.state
            list.splice(index,1)
            this.setState({list})
        }
        // 单选
        bindChange=(id)=>{
            const isChecked=event.target.value
            const {list}=this.state
            const book=list.find(item=>item.id===id)
            book.state=!book.state
            this.setState({list})
        }

        };
      ReactDOM.render(<Welcom />, document.getElementById("root"))
    </script>
  </body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/343061.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Theano教程:Python的内存管理

在写大型程序时候的一大挑战是如何保证最少的内存使用率。但是在Python中的内存管理是比较简单的。Python显示分配内存&#xff0c;使用引用计数系统管理对象&#xff0c;当指向某一个对象的引用数变为 0 的时候&#xff0c;该对象所占的内存就会被释放。理论上听起来很不错&am…

Linux基础语法进阶版

Linux基础语法 查看文件内容指令 touch 主要是修改文件时间&#xff0c;多用创建文件 -a #只更改访问时间 -m #只更改修改时间 -c --no-create#不创建任何文件cat 展示小文件内容 -b #对于非空输出行编号 -n #对于所有行输出编号 -E #在每行结束处显示"$" -A #展示所…

全国重点城市春节商圈客流数据来了,最火爆商圈果然是它 | 数说热点

作为疫情防控政策进一步放开后的首个春节&#xff0c;在“返乡潮”、“出游潮”和各地促销费政策的刺激下&#xff0c;火热强劲且亮点纷呈的线下消费市场随烟火气再次回归。那么2023年春节&#xff0c;线下消费市场呈现出哪些特点&#xff1f;全国各大购物中心在引客流聚人气方…

Java开发学习(五十)----MyBatisPlus快速开发之代码生成器解析

1、代码生成器原理分析 造句: 我们可以往空白内容进行填词造句&#xff0c;比如: 在比如: 观察我们之前写的代码&#xff0c;会发现其中也会有很多重复内容&#xff0c;比如: 那我们就想&#xff0c;如果我想做一个Book模块的开发&#xff0c;是不是只需要将红色部分的内容全部…

uni-app②

文章目录二、微信小程序简介&#xff08;一&#xff09;文档相关开发者工具使用小程序代码构成小程序基本操作三、uniapp 开发规范uniapp 开发环境开发工具下载 HBuilderX工程搭建项目运行浏览器运行四、组件基础组件基础组件列表组件公共属性集合扩展组件自定义组件UNI-ICON五…

MyBatis笔记【JavaEE】

1.MyBatis是什么 持久层框架 【也是一个ORM框架 对象关系映射】 是一个优秀的ORM持久层框架 特点&#xff1a;灵活 支持自定义SQL、存储过程以及高级映射。MyBatis去除了几乎所有的JDBC代码以及设置参数和获取结果集的工作。MyBatis可以通过简单的XML或注解来配置和映射原始类…

分布式缓存服务DCS-企业版性能更强,稳定性更高

背景介绍 近年来&#xff0c;随着各行业业务需求急速增加&#xff0c;数据量和并发访问量呈指数级增长&#xff0c;原来只能依附于关系型数据库的传统“缓存”逐渐难以支撑上层业务&#xff0c;开源Redis也面临着如“容量有限”、 “可靠性有限”、 “数据重复拷贝&#xff0c…

GeniE 实用教程(二)几何与网格

目 录一、前言二、Guiding Geometry2.1 Guide Point2.2 Guide Line2.3 Guide Plane2.4 Polyline三、Structure3.1 结构梁3.2 结构板3.1 结构壳四、Mesh4.1 网格属性4.2 网格划分4.3 查看网格五、参考文献一、前言 SESAM &#xff08;Super Element Structure Analysis Module&a…

操作系统(day08)内存

存储单元 内存的几个基本概念 存储单元 内存地址从0开始&#xff0c;每个地址对应一个存储单元 存储单元大小根据计算机按照什么方式编址 按字节编址 则每个存储单元大小为一字节&#xff0c;即1B&#xff0c;即8个二进制位按字编址 看这个计算的字长是多少位&#xff0c;如…

一到重要时刻就大脑空白?

很多人可能都经历过这样一幕&#xff1a;花了好多精力准备的一场考试、面试、演讲&#xff0c;到了上场的那一刻&#xff0c;之前准备的东西全都忘了&#xff0c;大脑一片空白。为什么会这样呢&#xff1f;我们所学到的东西都要经过三个步骤才能成为记忆&#xff1a;获取&#…

Leetcode 每日一题 1234. 替换子串得到平衡字符串

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…

深入解析golang几种非常主流的依赖注入框架,附实现案例及原理解析

什么是依赖注入&#xff1f; 依赖注入 &#xff0c;英文全名是 dependency injection&#xff0c;简写为 DI。 百科解释&#xff1a; 依赖注入是指程序运行过程中&#xff0c;如果需要调用另一个对象协助时&#xff0c;无须在代码中创建被调用者&#xff0c;而是依赖于外部的注…

【情人节专属】AI一键预测你和Ta的CP值

如何预测你和心仪的Ta有没有夫妻相&#xff1f;基于华为云ModelArts开发的【一键预测你和Ta的CP值】Demo帮你预测CP指数。该模型利用ssim算法综合计算五官特征相似程度&#xff0c;从而得出CP值。//夫妻相的原理在当今心理学、生物学仍有很大争议&#xff0c;夫妻相指数高并不意…

nVisual综合布线可视化管理系统解决方案

​一、综合布线管理系统的必要性 如今企事业单位办公人员变化很快&#xff0c;如果还是采用传统方式通过工程竣工图或者网络拓扑图来进行网络维护工作会非常麻烦&#xff0c;并且对管理人员的要求也会很高&#xff0c;管理人员需要清楚的知道工作区的信息点与配线架点之间的对…

java微信小程序旅游管理系统

本旅游服务软件,主要实现了管理员后端&#xff1a;首页、个人中心、旅游攻略管理、旅游资讯管理、景点信息管理、门票预定管理、用户管理、酒店信息管理、酒店预定管理、推荐路线管理、论坛管理、系统管理,用户前端&#xff1a;首页、景点信息、酒店信息、论坛中心、我的等。总…

剑指 Offer II 020. 回文子字符串的个数 马拉车算法

这里写自定义目录标题马拉车算法剑指 Offer II 020. 回文子字符串的个数马拉车算法 马拉车算法可以以接近线性时间判断计算回文串长度&#xff0c;遍历每一个中心点&#xff0c;再向两遍扩充 填充字符 其中$ ! 作为边界&#xff0c;添加#可以避开对偶数回文串的讨论&#xff…

博客系统--测试用例编写

目录一&#xff0c;整体概览1.1&#xff0c;登录页面测试用例1.2&#xff0c;注册页面测试用例1.3&#xff0c;发布博客功能测试1.4&#xff0c;删除博客功能测试二&#xff0c;具体设计2.1&#xff0c;注册页面测试--等价类法2.2&#xff0c;删除博客功能测试--判定表法一&…

【csdn首发】全网爆火的从零到一落地接口自动化测试

前段时间写了一系列自动化测试相关的文章&#xff0c;当然更多的是方法和解决问题的思路角度去阐述我的一些观点。结合我自己实践自动化测试的一些经验以及个人理解&#xff0c;这篇文章来聊聊新手如何从零到一落地实践接口自动化测试。 为什么要做接口测试 测试理念的演变 早…

热启动预示生态起航的Smart Finance,与深度赋能的SMART通证

2023年初加密市场的回暖&#xff0c;意味着各个赛道都将在新的一年里走向新的叙事。最近&#xff0c;我们看到GameFi赛道也在市场回暖的背景下&#xff0c;逐渐走出阴霾。从融资数据上看&#xff0c;1月获得融资的GameFi项目共12个&#xff0c;融资突破8000万美元&#xff0c;1…

肝一波,这个网站居然可以免费使用ChatGpt功能

一、肝一波&#xff0c;体验真爽 废话不多少&#xff0c;小码哥直接提大家感兴趣的问题&#xff0c;截图分享给大家。 问题一&#xff1a;如何在一年内赚到100万元 答&#xff1a; 一、赚钱的方式 开公司&#xff1a;在一年内开拓新业务模式&#xff0c;寻求投资&#xff…