React 组件绑定点击事件，并且传参完整Demo

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

1.传数组下标给点击事件Demo：

const A = 65 // ASCII character codeclass Alphabet extends React.Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);this.state = {justClicked: null,letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))};}handleClick(letter) {this.setState({ justClicked: letter });}render() {return (<div>Just clicked: {this.state.justClicked}<ul>{this.state.letters.map(letter =><li key={letter} onClick={() => this.handleClick(letter)}>{letter}</li>)}</ul></div>)}
}

代码说明，定义了一个数组，名为字母，在组件里面通过对循环渲染，每个渲染出来的李组件都绑定了对应的按键和点击事件，并且把该组件的关键当做参数传递给了handleClick函数。

2.传递自定义属性给事件Demo

const A = 65 // ASCII character codeclass Alphabet extends React.Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);this.state = {justClicked: null,letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))};}handleClick(e) {this.setState({justClicked: e.target.dataset.letter});}render() {return (<div>Just clicked: {this.state.justClicked}<ul>{this.state.letters.map(letter =><li key={letter} data-letter={letter} onClick={this.handleClick}>{letter}</li>)}</ul></div>)}
}

定义了自定义属性 letter 值是数组letters的下标。然后在 handleClick 事件通过 e.target.dataset 获取。

React 组件绑定点击事件，并且传参完整Demo相关推荐

react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
Web前端-Vue ElementUI el-input组件绑定点击事件
1.element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"&g ...
微信小程序——1、自定义顶部渐变色2、封装好的自定义顶部栏（父组件获取子组件的点击事件）
1.自定义顶部渐变色第一种使用代码实现渐变效果图: .json代码 "navigationStyle":"custom" .wxml代码 <view ...
事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符
事件绑定 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
3. React 组件中怎么做事件代理？它的原理是什么？
3. React 组件中怎么做事件代理?它的原理是什么? React 基于 Virtual DOM 实现了一个 SyntheticEvent 层(合成事件层), 定义的事件处理器会接收到一个合成事件对 ...
在html中搜索按钮事件,html中button绑定点击事件的几种方法介绍
HTML中为button绑定事件的方式有三种. 例如以下标签: submit 一.使用jquery进行绑定$('#btn_submit').click(function(){ }); 二.使用原生js ...
[Swift]最强UIButton解析 | #selector()绑定点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
element-ui 框架的checkbox组件：点击事件与选中判断 - 代码篇
vue + element-ui 框架的checkbox组件:点击事件与选中判断代码如下: html部分  <div class="btn ...

React 组件绑定点击事件，并且传参完整Demo

承接微信小程序开发。扫码加微信。

React 组件绑定点击事件，并且传参完整Demo相关推荐

最新文章

热门文章