提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

React实践：Vite创建React项目、react事件传递参数的两种方式

事件项目React 创建 方式 实践 参数 两种
2023-09-11 14:19:55 时间

一、Vite创建React项目

　　Vite 本身就是一个构建工具，开发环境下不打包，生成环境使用 Rollup 进行打包。那么如何利用 Vite 创建一个 React 的项目呢？ 执行命令 npm init vite@latest，根据提示，选择 react 即可。因此，整体上其实与官方的脚手架搭建项目步骤一致，也是分为 2 个步骤：

1、脚手架下载安装

　　执行命令 npm init vite@latest，根据提示，选择 react：

√ Project name: ... my-project
? Select a framework: » - Use arrow-keys. Return to submit.  
    vanilla
   vue
>  react
   preact
   lit-element
   svelte
? Select a variant: » - Use arrow-keys. Return to submit.
>   react
   react-ts

Scaffolding project in xxxxxxxxxxxxxx

Done. Now run:   
 cd vite-project
 npm install
 npm run dev

2、项目启动

　　项目下载完成后，在我们的命令行中是能够看到相关启动命令的提示信息的，根据提示，执行以下命令即可：

cd vite-project
npm install
npm run dev

二、react事件传递参数的两种方式

　　因为react不是跟vue一样直接在事件里面传递参数就可以，见下图

　　这样你跟本就不需要点击他就立即执行了，所以如果要在事件里面传参，我们常用的有两种方法

1、第一种通过bind强制绑定this

注意：这里的话第一个参数必须是this因为这里有个隐式绑定this的缘故，bind默认的第一个参数是触发者本身的元素或者事件
如果传入一个参数。那么接收的只有一个参数那么这个参数就是触发者的元素或者事件
如果传入两个参数，接收一个参数，那么这个参数就是你传入的第二个参数（隐式传参）第一个参数默认给你隐藏了
如果传入两个参数，接收两个参数，那么第一个参数是你传入的参数，第二个参数才是触发者的元素或者事件

2、第二种传参箭头函数

　　因为箭头函数this绑定的是上一层。这里传参没甚讲究，传入的是什么接收的就是什么

import React, { Component } from 'react';
export default class App extends Component {
    state = {
        count:1
    }
    addM(m,event) {
        console.log(event);
        this.setState({count:this.state.count + m})
    }
    add (params1,params2,event) { // event是最后一个参数
        this.setState({count:this.state.count + params1 + params2})
    }
    render() {
        return (
            <>
               <div>count:{ this.state.count}</div>
               {/* 1.react事件传递参数1:使用箭头函数包裹调用参数的函数 */}
               <button onClick={(event) => {
                   const m = 100
                   this.addM(m,event)
               }}>加m</button>
               {/* 2.react事件传递参数2 */}
               <button onClick={this.add.bind(this,1000,100)}>加</button>
            </>
        );
    }
}

 

相关文章