React 事件处理
另外一篇总结:react 中的事件绑定 。 2019-05-16 更新
建议:在了解 js 的 this 取值后食用更佳。
一、react 与 Html 中用法的异同和注意点
html 中的绑定事件的写法:
<button onclick="activateLasers()"> // onClick = "xxxx()"
激活按钮
</button>
react 中的写法:
<button onClick={activateLasers}> // onclick = { xxxx }
激活按钮
</button>
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为, 必须明确的使用 preventDefault。
例如,通常我们在 HTML 中阻止链接默认打开一个新页面,可以这样写:
<a href="#" onclick="console.log('点击链接'); return false"> // return false
点我
</a>
但是,在 react 中,阻止默认行为必须得用下面的方式:
function ActionLink() {
function handleClick(e) {
e.preventDefault(); // preventDefault()
console.log('链接被点击');
} return (
<a href="#" onClick={handleClick}>
点我
</a>
);
}
同样,使用 React 的时候通常不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。只需要在这个元素初始渲染的时候提供一个监听器。
二、绑定事件处理函数
首先一个例子:
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true}; // 这边绑定是必要的,这样 `this` 才能在回调函数中使用
// 这是其中的一种写法
this.handleClick = this.handleClick.bind(this);
} handleClick() {
this.setState(prevState => ({ // prevState 会在后面关于 setState 中详细介绍
isToggleOn: !prevState.isToggleOn
}));
} render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
} ReactDOM.render(
<Toggle />,
document.getElementById('example')
);
为什么需要这样写?
我的看法是和 this、 bind() 以及 函数的执行符号 有关。函数执行的符号是 "()"。
1.为什么在之前的组件案例(入坑笔记(二)的 Clock 组件)中的 tick 方法不需要绑定?
一些疑问
你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
这并不是 React 的特殊行为;它是函数如何在 JavaScript 中运行的一部分。通常情况下,如果你没有在方法后面添加 () ,例如 onClick={this.handleClick},你应该为这个方法绑定 this。
函数绑定的其他两种方法:
1.使用 ES6 的箭头函数来定义组件中的函数(属性初始化语法):
class LoggingButton extends React.Component {
// 这个语法确保了 `this` 绑定在 handleClick 中
handleClick = () => {
console.log('this is:', this);
} render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
2.render 函数中使用回调函数(不建议使用):
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
} render() {
// 这个语法确保了 `this` 绑定在 handleClick 中
return (
<button onClick={(e) => this.handleClick(e)}> // 这边实际上是执行了一个回调函数,在回调函数中执行 handleClick 方法
Click me
</button>
);
}
}
三、向事件处理函数传递参数(无参函数 -> 有参函数)
两种方式,等价:
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> // 回调形式传参
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> // bind() 形式传参
值得注意的是,通过 bind 方式向监听函数传参,在类组件中定义的监听函数,事件对象 e 要排在所传递参数的后面,例如:
class Popper extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
} preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
} render(){
return (
<div>
<p>hello</p>
{/* 通过 bind() 方法传递参数。 */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>
);
}
}