事件处理
事件绑定
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时可能有性能问题, 参考博文;