事件处理

事件绑定#

React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:

  • React 事件的命名采用小驼峰式(camelCase), 而不是纯小写.
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串.
传统HTML
<button onclick="activateLasers()"> Activate Lasers </button>
React JSX
<button onClick={activateLasers}> Activate Lasers </button>

阻止事件默认行为#

React中的事件函数不能通过返回false的方式阻止默认行为. 你必须显式的使用 preventDefault:

例如阻止表单的默认提交行为:

传统HTML
<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>
React JSX
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}

上面事件函数接收的事件参数e是React提供的合成事件, 与原生事件不完全相同

TODO 了解事件冒泡不同(e.stopPropagation)

this绑定#

有三种方式绑定this上下文

public class fields语法#

note

注意: 这是 实验性 语法, create-react-app 默认开启

class LoggingButton extends React.Component {
// 此语法确保 `handleClick` 内的 `this` 已被绑定。
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}

构造函数提前bind#

class LoggingButton extends React.Component {
constructor(props) {
super(props);
this.state = { };
// 为了在回调中使用 `this`,这个绑定是必不可少的
this.handleClick = this.handleClick.bind(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() {
return (
<button onClick={e => this.handleClick(e)}>
Click me
</button>
);
}
}

向事件处理程序传递参数#

在循环中,通常我们会为事件处理函数传递额外的参数:

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

上述两种方式是等价的

note

绑定事件处理程序是箭头函数, 或者直接使用bind时可能有性能问题, 参考博文;