html与js项目引入react框架之绑定事件

最新推荐文章于 2024-05-06 16:24:30 发布
最新推荐文章于 2024-05-06 16:24:30 发布
阅读量561 收藏 1
点赞数
分类专栏： react 文章标签： react.js html5 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51062476/article/details/120260380
版权

一、react的引入

需要引入三个文件

1.react.js

https://unpkg.com/react@17/umd/react.development.js

https://unpkg.com/react-dom@17/umd/react-dom.development.js

2.babel.js（因为react是xml编写的，所以需要用babel编译才不会报错）

https://unpkg.com/@babel/standalone/babel.min.js

以上都可以直接引入或者打开连接下载js代码，我是将代码下载本地做演示

<script src="./static/react.development.js"></script>
<script src="./static/react-dom.development.js"></script>
<script src="./static/babel.js"></script>

一定要按照上面的顺序，否则会报错

二、数据接收

1.constructor大体有两个作用

（1）.初始化this.state

（2）纠正方法的this的指向

2.用到了constructor就必须写super()，是用来初始化this的，可以绑定事件到this上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./static/antd.css">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="app"></div>
</body>
<script src="./static/react.development.js"></script>
<script src="./static/react-dom.development.js"></script>
<script src="./static/babel.js"></script>
<script src="./static/antd.js"></script>
<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header}></Header>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        //constructor大体有两个作用
        //1.初始化this.state
        //2.纠正方法的this的指向
        constructor(props) {
            //用到了constructor就必须写super()，是用来初始化this的，可以绑定事件到this上
            super(props);
            this.title = props.title;
        }
        render() {
            // react的class名一定要加Name,而且要驼峰式，等号后面引号内写class名
            return (
                <div >
                    <h1 className="styleClass">{this.title}</h1>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="我是参数传递的头部" />, document.getElementById('app'))

</script>

</html>

三、事件处理与绑定

1.数据的改变 要通过this.setState

   this.setState({

           属性名称:值

   })

注意：

State 的更新可能是异步的

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

例如，此代码可能会无法更新计数器：

this.setState({
  counter: this.state.counter + this.props.increment,
});

要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

 上面使用了箭头函数，不过使用普通的函数也同样可以：

this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

2.onClick：为点击事件标签

3.创建事件有两种方法

（1）需要在在constructor中bind来指定事件

         this.start = this.start.bind(this);

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header}></Header>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
            this.title = props.title;
            this.state = {
                date: new Date().toLocaleDateString(),
                mytitle: props.title
            }
            //事件的创建需要先在constructor中加bind来指定
            this.start = this.start.bind(this);
        }

        //创建事件
        start() {
            // 数据的改变 要通过this.setState({
            // 属性名称:值
            // })
            this.setState({
                mytitle: "66666"
            })
        }
        render() {
            // react的class名一定要加Name,而且要驼峰式，等号后面引号内写class名
            // onClick：为点击事件标签
            // this.start：为指向创建的事件进行调用
            return (
                <div >
                    <h1 className="styleClass">{this.state.mytitle}</h1>
                    <h2>{this.state.date}</h2>
                    <button onClick={this.start}>点我开始启动时间</button>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="我是参数传递的头部" />, document.getElementById('app'))

</script>

 点击前

点击后 

 

（2）不想使用bind指定 可以使用箭头函数来处理this指向对象

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header}></Header>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
            this.title = props.title;
            this.state = {
                date: new Date().toLocaleDateString(),
                mytitle: props.title
            }
        }

        // 创建事件，命名为show
        show = () => {
            alert(this.title)
        }

        render() {
            // react的class名一定要加Name,而且要驼峰式，等号后面引号内写class名
            // onClick创建点击事件，this.show执行事件
            return (
                <div >
                    <h1 className="styleClass">{this.state.mytitle}</h1>
                    <h2>{this.state.date}</h2>
                    <button onClick={this.show}>点我开始启动时间</button>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="我是参数传递的头部" />, document.getElementById('app'))

</script>

 点击前

点击后 

4.参数的处理

（1）bind写法

         将值传入事件中进行运行

         创建事件，命名为show,(content)如函数取值

         this.show.bind(this, "你好")传递数据需要加bind,括号内第一参数必须写this,第二参数传值

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header}></Header>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
            this.title = props.title;
            this.state = {
                date: new Date().toLocaleDateString(),
                mytitle: props.title
            }
        }

        // 创建事件，命名为show,(content)如函数取值
        show = (content) => {
            alert(this.title + "和" + content)
        }

        render() {
            // react的class名一定要加Name,而且要驼峰式，等号后面引号内写class名
            // onClick创建点击事件，this.show.bind(this, "你好")传递数据需要加bind,括号内第一参数必须写this,第二参数传值
            return (
                <div >
                    <h1 className="styleClass">{this.state.mytitle}</h1>
                    <h2>{this.state.date}</h2>
                    <button onClick={this.show.bind(this, "你好")}>点我开始启动时间</button>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="我是参数传递的头部" />, document.getElementById('app'))

</script>

点击后结果

 （2）不写bind的简写方法

          使用箭头函数可以省略bind和括号内第一参数this

        render() {
            // react的class名一定要加Name,而且要驼峰式，等号后面引号内写class名
            // onClick创建点击事件，使用箭头函数可以省略bind和括号内第一参数this
            return (
                <div >
                    <h1 className="styleClass">{this.state.mytitle}</h1>
                    <h2>{this.state.date}</h2>
                    <button onClick={() => this.show("你好")}>点我开始启动时间</button>
                </div>
            )
        }

5.最省略写法

   创建事件直接像创建函数一样，不需要function和箭头

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header}></Header>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
            this.title = props.title;
            this.state = {
                date: new Date().toLocaleDateString(),
                mytitle: props.title
            }
        }

        // 创建事件直接像创建函数一样，不需要function和箭头
        start(id, content, e) {
            alert(e.target.innerHTML);//获取点击事件元素html
            this.setState({
                mytitle: '修改内容：' + content + 'id：' + id
            })
        }

        render() {
            // react的class名一定要加Name,而且要驼峰式，等号后面引号内写class名
            // onClick创建点击事件，使用箭头函数可以省略bind和括号内第一参数this
            return (
                <div >
                    <h1 className="styleClass">{this.state.mytitle}</h1>
                    <h2>{this.state.date}</h2>
                    <button onClick={(e) => this.start(1, "666666", e)}>事件绑定</button>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="我是参数传递的头部" />, document.getElementById('app'))

</script>

点击按钮前

点击按钮后，弹出层显示按钮html内容

 点击确认后，页面文本被修改

四、条件语句生成元素

这里做了几层数据传递，首先父组件将数据给到子组件

Content组价中子组件获取数据做判断

将DOM元素存入变量，使用{}可以动态展示

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                // 这里做了几层数据传递，首先父组件将数据给到子组件
                <div>
                    <Header title={this.props.header}></Header>
                    <Content title={this.props.content} isLogin={this.props.isLogin}></Content>
                    <Footer title={this.props.footer}></Footer>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return (
                <div >
                    <h1 className="styleClass">{this.props.title}</h1>
                </div>
            )
        }
    }
    class Content extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            // 子组件获取数据做判断
            var button = null;
            if (this.props.isLogin == 1) {
                button = <button>已登录</button>
            } else {
                button = <button>未登录</button>
            }
            //将DOM元素存入变量，使用{}可以动态展示
            return (
                <div>
                    {button}
                    <h2>{this.props.title}</h2>
                </div>
            )
        }
    }

    class Footer extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return (
                <div >
                    <h1 className="styleClass">{this.props.title}</h1>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="头部描述" content='内容描述' footer='底部描述' isLogin='1' />, document.getElementById('app'))

</script>

 页面显示结果

五、循环语句的生成

这里接上面代码在Footer组件中进行演示

使用map获取list中每个数据进行渲染

循环渲染一定要加key,否则或报错

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                // 这里做了几层数据传递，首先父组件将数据给到子组件
                <div>
                    <Header title={this.props.header}></Header>
                    <Content title={this.props.content} isLogin={this.props.isLogin}></Content>
                    <Footer title={this.props.footer}></Footer>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return (
                <div >
                    <h1 className="styleClass">{this.props.title}</h1>
                </div>
            )
        }
    }
    class Content extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            // 子组件获取数据做判断
            var button = null;
            if (this.props.isLogin == 1) {
                button = <button>已登录</button>
            } else {
                button = <button>未登录</button>
            }
            //将DOM元素存入变量，使用{}可以动态展示
            return (
                <div>
                    {button}
                    <h2>{this.props.title}</h2>
                </div>
            )
        }
    }

    class Footer extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                list: [1, 2, 3]
            }
        }
        render() {
            // 使用map获取list中每个数据进行渲染
            // 循环渲染一定要加key,否则或报错
            var liList = this.state.list.map(function (item, index) {
                return <li key={index}>{item}</li>
            })
            return (
                <div >
                    <h1 className="styleClass">{this.props.title}</h1>
                    <ul>{liList}</ul>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="头部描述" content='内容描述' footer='底部描述' isLogin='1' />, document.getElementById('app'))

</script>

 页面显示结果

五、插槽写法

使用Header组件演示

在子组件标签中写标签与内容，然后在子组件里用this.props.children接收渲染

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                // 在子组件标签中写标签与内容，然后在子组件里用this.props.children接收渲染
                <div>
                    <Header title={this.props.header}>
                        <div>我是插槽1</div>
                        <div>我是插槽2</div>
                    </Header>
                    <Content title={this.props.content} isLogin={this.props.isLogin}></Content>
                    <Footer title={this.props.footer}></Footer>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
        }
        // 创建标签，内容使用插槽this.props.children
        render() {
            return (
                <div >
                    <h1 className="styleClass">{this.props.title}</h1>
                    <h3>{this.props.children}</h3>
                </div>
            )
        }
    }
    class Content extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            // 子组件获取数据做判断
            var button = null;
            if (this.props.isLogin == 1) {
                button = <button>已登录</button>
            } else {
                button = <button>未登录</button>
            }
            //将DOM元素存入变量，使用{}可以动态展示
            return (
                <div>
                    {button}
                    <h2>{this.props.title}</h2>
                </div>
            )
        }
    }

    class Footer extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                list: [1, 2, 3]
            }
        }
        render() {
            // 使用map获取list中每个数据进行渲染
            // 循环渲染一定要加key,否则或报错
            var liList = this.state.list.map(function (item, index) {
                return <li key={index}>{item}</li>
            })
            return (
                <div >
                    <h1 className="styleClass">{this.props.title}</h1>
                    <ul>{liList}</ul>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="头部描述" content='内容描述' footer='底部描述' isLogin='1' />, document.getElementById('app'))

</script>

页面结果

麦圈先生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 调用react组件_React JS组件简介
cumubi7552的博客
07-21 1380
js 调用react组件In this article, I will help you walk through the process of creating or working with React JS components for your projects. 在本文中，我将帮助您逐步完成为项目创建或使用React JS组件的过程 。 As it's always said, ev...
React中的innerHTML绑定 和 innerText绑定
hdj0511的博客
10-16 441
React中的innerHTML绑定 和 innerText绑定
在HTML页面 学习React 基础语法
weixin_47529732的博客
05-06 834
学习笔记，React基本语法及使用，JSX使用
React拖拽（html里引入js版本）
m0_59074147的博客
08-31 296
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/browser.js">.
react嵌入原生html,在react中怎么引用js
weixin_33841242的博客
05-30 1876
在react中怎么引用js推荐两种引入的方法，当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面，然后在React项目引入。第一种：使用插件 react-load-script如果没有安装可以使用 yarn add react-load-script 或者 npm install react-load-script，看你使用哪个包管理工具。然后你就可以像使用React组件那样插入JS...
iOS原有项目如何引入ReactNative框架,实现跨平台?
weixin_34200628的博客
01-23 107
目录创建--------------1.在根目录下创建"package.json"文件: package.json的内容示例:{"name": "KMNetPatient","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/r...
React框架与简单案例分析.rar
06-01
React框架是目前Web开发中最流行的前端库之一，由Facebook开发并维护。它以其组件化、虚拟DOM和单向数据流等特性，极大地提高了开发者构建复杂用户界面的效率。本资源"React框架与简单案例分析"将带你深入理解React...
【React框架】教程&案例&相关项目.zip
最新发布
06-11
4. **事件处理**：React中的事件绑定与原生JavaScript有所不同，学习如何正确处理用户交互事件。 5. **状态提升与Context API**：当多个组件需要共享同一份状态时，状态提升和Context API能避免层层传递props，简化...
JavaScript框架Angular和React深度对比
10-18
JavaScript的状态管理库，常与React一起使用，提供可预测化的状态管理。Redux要求应用程序的所有状态变更都通过Action来触发，并且这些Action会被Store捕获和处理。Redux的单向数据流使得状态变化变得清晰，有利于...
React实现双向绑定示例代码
09-01
在传统的JavaScript MVC框架中，双向数据绑定是常见的特性，但在React中，其设计理念更倾向于单向数据流，即数据从父组件流向子组件，然后通过事件处理函数来更新状态。然而，React仍然提供了一些方法来实现类似于...
react-phaser：React.js的Phaser.js绑定
02-03
`React-Phaser` 是将React与Phaser.js结合的一个项目，允许开发者使用React的组件系统来构建基于Phaser的游戏或交互式应用。它将Phaser游戏逻辑封装在React组件中，使开发者可以利用React的强大功能和Phaser的游戏...
react基本引入文件
08-04
里面有五个文件，如果用的是react15版本的就引入react.min.js，react-dom.min.js,browser.min.js;要是用react16版本的就引入react.production.min.js，react-dom.production.min.js,dom.min.js,browser.min.js三个文件
react 项目中引入js连接资源。
热门推荐
qq_38719039的博客
01-29 1万+
1. 在 html文件里引入脚本资源。 2.找到 .roadhogrc 这个文件。打开编辑声明对象。 引用于：https://www.npmjs.com/package/roadhog externals Configure webpack's externals property. e.g. // Don't pack react and react-
如何在现有工程中引入react.js
xgbm_k的专栏
09-19 4038
公司存在着大量的使用后台模板渲染的网站项目。如何在这些项目中嵌入reactjs是这篇文章讨论的问题，也是许多公司面临的相同问题。reactjs官网专门有一个章节讨论了如何将reactjs加入到现有项目中：https://facebook.github.io/react/docs/integrating-with-other-libraries.html。但是感觉说得不是特别清楚。我经过尝试后发现了一
JSS与React的集成
盏茶作酒的博客
11-15 641
介绍 React-JSS使用新的Hooks API将JSS与React集成在一起。 JSS和默认预设已经内置。 从v10开始，不支持基于HOC的API，并将在所有即将发布的主要版本中将其删除。如下的使用方式将不支持。 import React from 'react' import {render} from 'react-dom' import withStyles from 'react-jss' // 1、创建styles const styles = { ... } // 2、使用
【Reacte】 React 嵌入JS表达式 、条件渲染 、数组列表渲染 、样式处理
m0_64494670的博客
03-02 353
使用JSX配合嵌入的 JS表达式 、条件渲染、列表渲染、可以描述任意UI结构 ，然后推荐使用className方式添加样式
js对象的引用传递在react中的使用注意事项
学亮编程手记
04-29 275
let buildTask=_.get(config,"templates.dag.tasks").find((task:any)=>task.id===targetId) _.set(buildTask,"dependencies",[..._.get(buildTask,"dependencies",[]),_.get(payload, "source.id")]) //这里是引用传递，无需再次set回去 // _.set(config, "templates.dag.tasks", [...
js 可以调用react吗_Vesselize - 一个可以与 Vue.js 及 React 无缝集成的 IoC 容器
weixin_36162906的博客
02-01 229
笔者目前是一个 Vue.js 和 React 都在用的前端打工人，像 Vue Composition API 和 React Hooks 这些技术真的是拯救人生啊，感觉前端的开发体验越来越像丝绸般顺滑。另一方面呢，由于目前的项目里面有着非常复杂的数据处理逻辑，所以我们封装了很多可复用的 Service 类。但是有一点不太方便的是，必须在业务组件或者 Service 里面手动创建它们所依赖的 Ser...
html与js项目引入react框架之渲染方式
m0_51062476的博客
09-11 979
一、react的引入 需要引入三个文件 1.react.js https://unpkg.com/react@17/umd/react.development.js https://unpkg.com/react-dom@17/umd/react-dom.development.js 2.babel.js（因为react是xml编写的，所以需要用babel编译才不会报错） https://unpkg.com/@babel/standalone/babel.min.js 以上都可以直接引入或者打
2023前端最新版-vue面试题.pdf
03-04
"这是一份关于2023年最新前端面试中Vue.js相关问题的PDF文档，涵盖了Vue的优势、渐进式特性、与React的对比、MVVM模式以及Vue框架在MVVM中的应用等关键知识点。" Vue.js作为一款流行的前端JavaScript框架，其在2023...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值