React中事件传参的写法
来源:互联网 发布:mac怎么打出顿号 编辑:程序博客网 时间:2024/04/30 08:17
最近在尝试React,发现之前很多用jQuery就能轻松解决的事情,现在遇到了新的挑战。当然这并不表示React不行,而是我还需要更多的研究和探索。React中的点击事件,想要传参数给方法,始终不得要领,现在摸索出一套写法,也许不是很完善,但先记录下来,以备以后改进
class SchemeSwitcher extends Component { constructor(props){ super(props); this.handleClick = this.handleClick.bind(this); }; handleClick(event) { console.log(event.target.dataset.index); } render() { const listShows = appInfo.threeSchemeNameList.map((nameStr, index) => { let classStr = (index === this.props.schemeIndex) ? 'selected' : ''; return ( <li className={classStr} key={index} data-index={index} onClick={this.handleClick}>{nameStr}</li> ) }); return ( <ul className="switcher"> {listShows} </ul> ); };}
其中:
<li className={classStr} key={index} data-index={index} onClick={this.handleClick}>{nameStr}</li>
虽然key是React必须传的,但在组件中却不能获取;
想通过onClick={this.handleClick(index)}这样的方式来直接传参数,但试过了,不行,函数在渲染时就被执行了;
最后想到了用data-,可以了,不过写法跟$(this).data(‘index’)不一样哦。其实页可以用jQuery,但既然是想尝试新的东西,还是扬弃过去,使用js的原生写法吧:event.target.dataset.index。
0 0
- React中事件传参的写法
- android 中事件的写法
- React中事件的用法
- react的es6写法
- React return的写法
- android中点击事件的写法
- React.js中常用的ES6写法总结
- React.js中ES6 和 ES5写法的一些差别
- react-native中TouchableXXX事件的分发
- react点击事件传参
- React点击事件的bind(this)传参问题
- React点击事件的bind(this)传参问题
- Android中点击事件的4中写法
- Android中按钮的点击事件的四种写法
- java中事件监听的4种写法
- adapter中加点击事件的一种写法
- html中<select>标签添加onclick()事件的正确写法
- Android按钮事件的五中写法总结
- WCF地址常用传输协议总结
- 第八周项目3-顺序串算法
- Linux USB 驱动开发(五)—— USB驱动程序开发过程简单总结
- Devexpress 分组自定义分组合计栏公式
- git 命令
- React中事件传参的写法
- dll 导出函数名的那些事
- WebRTC视频Android客户端的见解
- Activity四种启动模式
- 第8周项目5-计数的模式匹配
- Intellij IDEA 自定义 getter and setter
- 机器学习之单变量线性回归(Linear Regression with One Variable)
- 长短键识别
- 全选checked出现的问题