React从入门到精通系列之(6)事件处理
五、事件处理使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异:
例如,HTML: <button onclick="activeLasers()"> Active Lasers </button> 在React中略有不同: <button onClick={activateLasers}> Active Lasers </button> 另一个区别是,你不能返回 <a href="#" onclick="console.log('The link was clicked'); return false;"> Click me </a> 在React中,这可以改为: function ActiveLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked'); } return ( <a href='#' onClick={handleClick}> click me </a> ); } 这里,e是合成过的event。 React根据W3C规范定义这些event,因此你不需要担心浏览器兼容性的问题。 当使用React时,在创建后向DOM元素添加通常不需要调用 当您使用ES6类定义组件时,常见的模式是将事件处理程序作为类上的公共方法。 例如,此 class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 这个绑定是必要的,要不然该事件中的this就会是当前实例 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') ); 你必须十分注意JSX中事件函数的意义。 在JavaScript中,类中的方法默认不绑定this。 如果你忘记绑定 这不是React中特定的行为; 它是JavaScript中函数正常工作的一部分。 如果调用 class LoggingButton extends React.Component { // 使用剪头函数绑定this handleClick = () => { console.log('this is:',this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } } 默认情况下,在 如果不使用属性初始化语法,可以在回调中使用箭头函数: class LoggingButton extends React.Component { handleClick() { console.log('this is:',this); } render() { // 给事件传入一个剪头函数也可以绑定this return ( <button onClick={(e) => this.handleClick(e)}> Click me </button> ); } } 此语法的问题是,每次 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |