React - 事件处理

前端之家收集整理的这篇文章主要介绍了React - 事件处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

类似于DOM事件处理,有几点不同之处:

  • React的事件名字是首字母小写的驼峰式写法,而不是小写的。
  • 在JSX里面,事件处理器是一个函数,而不是一个字符串。

例子,HTML:

  1. <button onclick="activateLasers()">
  2. Activate Lasers
  3. </button>

React:

  1. <button onClick={activateLasers}>
  2. Activate Lasers
  3. </button>
  • 在React里面,不能通过返回false来阻止事件的默认行为,必须调用preventDefault函数

例子,HTML:

  1. <a href="#" onclick="console.log('The link was clicked.'); return false">
  2. Click me
  3. </a>

React:

  1. function ActionLink() {
  2. function handleClick(e) {
  3. e.preventDefault();
  4. console.log('The link was clicked.');
  5. }
  6.  
  7. return (
  8. <a href="#" onClick={handleClick}>
  9. Click me
  10. </a>
  11. );
  12. }

使用React不需要再DOM创建之后给事件添加监听器,仅需在渲染的时候提供监听器即可。

用ES6的class定义一个组件的时候,事件监听器是作为一个类方法存在的。 例如下面的Toggle组件,可以在“ON”和“OFF”之间切换:

  1. class Toggle extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {isToggleOn: true};
  5.  
  6. // This binding is necessary to make `this` work in the callback
  7. this.handleClick = this.handleClick.bind(this);
  8. }
  9.  
  10. handleClick() {
  11. this.setState(prevState => ({
  12. isToggleOn: !prevState.isToggleOn
  13. }));
  14. }
  15.  
  16. render() {
  17. return (
  18. <button onClick={this.handleClick}>
  19. {this.state.isToggleOn ? 'ON' : 'OFF'}
  20. </button>
  21. );
  22. }
  23. }
  24.  
  25. ReactDOM.render(
  26. <Toggle />,document.getElementById('root')
  27. );

关于JSX回调里面的那个this

在js里面,类方法默认是没有绑定(bound)的,加入你忘记了绑定this.handleClick,然后把它传给onClick,当函数调用的时候,this将会是undefined

这不是React的特有行为,可以参考这篇文章。 通常,在使用方法的时候,后面没有加(),例如onClick={this.handleClick},这时你就要绑定这个方法

如果你不想调用bind,还是有两种方法可以绕过的。

第一种是使用实验性的属性初始化语法(property initializer Syntax),用属性初始化来绑定回调函数

  1. class LoggingButton extends React.Component {
  2. // This Syntax ensures `this` is bound within handleClick.
  3. // Warning: this is *experimental* Syntax.
  4. // 确保'this'和handleClick绑定,这还是实验性的语法
  5. handleClick = () => {
  6. console.log('this is:',this);
  7. }
  8.  
  9. render() {
  10. return (
  11. <button onClick={this.handleClick}>
  12. Click me
  13. </button>
  14. );
  15. }
  16. }

这个语法在React里面是默认可用的。

第二种方法是使用箭头函数arrow function)。

  1. class LoggingButton extends React.Component {
  2. handleClick() {
  3. console.log('this is:',this);
  4. }
  5.  
  6. render() {
  7. // This Syntax ensures `this` is bound within handleClick
  8. // 确保'this'和handleClick绑定
  9. return (
  10. <button onClick={(e) => this.handleClick(e)}>
  11. Click me
  12. </button>
  13. );
  14. }
  15. }

这种语法的问题是,每次渲染LoggingButton的时候,都会创建不同的回调函数。 大部分情况下,这是没有问题的。但是,如果这个回调函数是作为一个prop传递给下层组件的话,这些组件会重复渲染。 通常的推荐方法是在constructor里面绑定,以避免这种性能问题。

参考链接

  1. React Doc:handling events

猜你在找的React相关文章