React中文文档之Handling Events

Handling Events - 事件处理
React元素的事件处理同DOM元素的事件处理非常相似。
有一些语法不同：
1.React事件使用 'camelCase-驼峰式' 命名，而不是 'lowercase-小写字母'
2.使用JSX，传递一个函数作为事件处理，而不是字符串
例如：
HTML代码：

         <button οnclick="activateLaser()">Activate Lasers</button>

略微不同于React：

         <button onClick="{activateLaser}">Activate Lasers</button>

另一个不同是，在React中，不能返回 'false' 来阻止默认行为。必须调用 'preventDefault'。例如，阻止链接打开新页面的默认行为：
HTML代码：

         <a href="#" οnclick="console.log('The link was clicked.'); return false">Click me</a>

React代码：

         function ActionLink() {function handleClick(e) {e.preventDefault();console.log('The link was clicked');}  return  (<a href="#" onClick={handleClick}>Click me</a>);}

这里，'e' 是一个合成事件(synthetic event)。React根据 W3C规范定义这些合成事件，因此不需要担心跨浏览器的兼容问题。可查看 'SyntheticEvent' 章节学习更多
当使用React，通常不需要调用 'addEventListener'，给已经创建的DOM元素添加事件监听。仅当最初渲染元素时，提供一个监听器来代替。
当使用ES6类，定义了一个组件，一个常见的模式是：一个事件处理可定义为该类的一个方法。例如：Toggle组件来渲染一个按钮，允许用户切换 '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 callbackthis.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回调函数中的 'this' 的意思。在JS中，类方法默认没有被绑定。如果你忘记绑定 'this.handleClick'，并且传递给 'onClick'，当函数被真实调用时，'this' 将会是 'undefined'。
这不是React特有的行为；它是 'JS中函数如何工作' 的一部分(是js的语法)。通常，如果你涉及一个方法，没有 '()' 跟在方法名后面，例如：onClick={this.handleClick}，你应该绑定这个方法。
如果调用 'bind' 使你苦恼，有2种方法可以绕过这个。如果你正在使用实验性的 'property initializer syntax-属性初始化语法'，你可以使用属性初始化来正确的绑定回调：

     class LoggingButton extengs React.Component {// This syntax ensures `this` is bound within handleClick.// Warning: this is *experimental* syntax.handleClick = () => {console.log('this is:', this);}  render() {return (<button onClick={this.handleClick}>Click me</button>);}}

使用 'Create React App' 方式创建项目(安装方式的一种)，这个解析是默认启用的。
如果你没有使用属性初始化语法，你可以在回调函数中，使用一个 '箭头函数'(arrow function)，例如：

     class LoggingButton extengs React.Component {handleClick = () => {console.log('this is:', this);}    render() {// This syntax ensures `this` is bound within handleClickreturn (<button onClick={(e) => this.handleClick(e)}>Click me</button>);}}

这种语法的问题是：每次 'LoggingButton' 渲染，都会创建一个不同的回调函数。在大多数情况下，是没问题的。然而，如果这个回调函数作为一个prop传递给低级组件(内部组件)，这些组件，可能执行一次额外的重新渲染。我们一般推荐在构造器中绑定，避免这类型的性能问题。

React中文文档之Handling Events相关推荐

react中文文档、英文文档及JavaScript相关文档及web前端相关资料
一. react中文文档 https://doc.react-china.org 二. react英文文档 https://reactjs.org 三.react Github https://git ...
React中文文档之Thinking in React
Thinking in React - 思考React 在我们看来,React是使用js来创建大的.速度快的web应用的首选方式.它已经在Facebook和Instagram表现的非常好. React ...
React中文文档之Forms
Forms - 表单在React中,HTML表单元素同其他DOM元素,有点不同.因为表单元素天生具备一些内部的state状态.例如:下面的HTML表单接收一个名字: <form>Name ...
React中文文档之Conditional Rendering
Conditional Rendering - 有条件的渲染在React中,你可以创建唯一的组件,来封装你需要的行为.之后,你可以仅仅渲染它们中的一些,这取决于你应用的状态. React中的有条件的 ...
React中文文档之introducing JSX
introducing JSX 思考下面的变量声明: const element = <h1>Hello world!</h1>; 这个有趣的标签解析,既不是字符串,也不是HT ...
React中文文档之State and Lifecycle
state 和生命周期到目前为止,我们仅仅学习了一种方式来更新UI. 我们调用 'ReactDOM.render()' 来改变输出渲染: function tick() {const elemen ...
React中文文档之Rendering Elements
Rendering Elements - 渲染元素元素是React应用的最小构建块一个元素描述了你想要在屏幕上看到的内容: const element = <h1>Hello, wor ...
（二十一）unity4.6学习Ugui中文文档-------交互-Supported Events amp; Raycasters
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitymanu ...
React中文文档 8. 列表 Key
1.遍历 const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) =><li>{number}& ...

React中文文档之Handling Events

React中文文档之Handling Events相关推荐

最新文章

热门文章