react绑定事件
来源:互联网 发布:淘宝买宠物狗 编辑:程序博客网 时间:2024/05/21 18:43
绑定事件
React
事件名区别于DOM事件,以驼峰命名法- JSX以函数的方式传递时间,而不是字符串
//HTML:<button onclick="activateLasers()"> Activate Lasers</button>//React:<button onClick={activateLasers}> Activate Lasers</button>
- React中只能用
preventDefault
阻止默认行为,不可以用return false
//HTML<a href="#" onclick="console.log('The link was clicked.'); return false"> Click me</a>//Reactfunction ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> );}
- JSX回调中的this问题
必须在回调函数constructor中给事件回调函数绑定this
,否则会报undefined
本章示例
constructor中绑定this
,点击按钮切换ON
和OFF
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); }}ReactDOM.render( <Toggle />, document.getElementById('root'));
阅读全文
0 0
- react绑定事件
- react-事件绑定
- react 实现双向绑定以及事件绑定
- React中ES6事件绑定相关事项
- react绑定事件的三种方式
- 关于react绑定事件中的this
- React事件处理函数中绑定this的bind()函数
- React学习之事件绑定处理机制(五)
- react合成事件的三种绑定方式bind
- react事件绑定--不再需要bind啦(es6)
- React事件
- react事件
- 绑定事件
- 绑定事件
- 绑定事件
- 事件绑定
- 事件绑定
- 事件绑定
- JavaScript基础之箭头函数
- java生成文件的默认保存路径与System.getProperty("user.dir")
- java 导入excle
- linux系统下的文件I/O操作
- 《PHP和MySQL WEB开发》第四章笔记
- react绑定事件
- InstantClient安装使用
- java.util.HashMap中的key为对象的问题,对象key获得相应的value值
- iOS_身份证号码校验
- 德国启用含有RFID芯片的新型身份证
- ACM单词拼接
- UVA 120Stacks of Flapjacks
- 51 nod 1574 排列转换(思维 贪心)
- Chrome开发者工具详解(1)-Elements、Console、Sources面板 Chrome开发者工具面板