demos源码

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
  • 不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    constructor(props) {
    	super(props);
    	this.handleClick = this.handleClick.bind(this);
    }
    render() {
    	return (
    		<div>
    			<a href="#" onClick={this.handleClick}>
    				a标签
    			</a>
    		</div>
    	);
    }

    handleClick(e) {
    	e.preventDefault();
    }

无传参情况

  1. 在constructor中手动绑定this,如上代码。

  2. 使用实验性的 public class fields 语法

    1
    2
    3
    4
    5
    <div onClick={this.publicFieldsHandle}>publicFieldsHandle</div>

     publicFieldsHandle = () => {
       console.log(this)
     }

  3. 回调中使用箭头函数
    每次渲染组件时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。

    1
    2
    3
    4
    5
    <div onClick={e => {this.arrowHandle()}}>arrow callback</div>

    arrowHandle() {
    	console.log(this);
    }

通常在构造器中绑定或使用 class fields 语法来避免这类性能问题。

传参情况

1
2
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。