一个简单的例子
//Button.js
import React from "react";
import ReactDOM from "react-dom";
class Button extends React.Component{
handleClick(e){
console.log(e);
console.log("hello world");
}
render(){
return <button onClick={this.handleClick}>sayHi</button>
}
}
ReactDOM.render(<Button/>,document.getElementById("root"));
- React里的 事件对象 不是 原生事件对象,而是 合成事件对象。
- 例子中的
Button组件
是一个class组件
,也可以将它写成一个function组件
function Button(){
function handleClick(e){
console.log(e);
console.log("hello wolrd");
}
return <button onClick={handleClick}>sayHi</button>
}
一个典型的例子
import React from "react";
import ReactDOM from "react-dom";
class Toggle extends React.Component{
constructor(props){
super(props);
this.state = {
isToggleOn:false
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState((state) => ({
isToggleOn:!state.isToggleOn
}))
}
render(){
return (
<button onClick={this.handleClick}>{this.state.isToggleOn?'ON':'OFF'}</button>
)
}
}
ReactDOM.render(<Toggle/>,document.querySelector('#root'));
setState()
既可以接受一个对象为参数,也可以接受一个函数为参数
//接受一个对象作为参数
this.setState({
isToggleOn:!this.state.isToggleOn
})
//接受一个函数作为参数
this.setState((state) => ({
isToggleOn:!state.isToggleOn
}))
- 绑定
this
有两种方式。- 第一种:在构造函数中使用
bind
为handleClick
绑定this
this.handleClick = this.handleClick.bind(this)
- 第二种:使用箭头函数
<button onClick={()=>this.handleClick()}></button>
函数是一个对象,箭头函数当然也是一个对象。组件每次更新时,都会认为这里产生了一个新的函数对象,所以会重新渲染。但显然,重新渲染是不必要的。因此,在onClick
中使用 箭头函数来绑定this
,不推荐 。
- 第一种:在构造函数中使用
不论 原生事件处理程序,还是React事件处理程序,第一个参数 都是 事件对象,且只有这一个参数。
但是,如果想向事件处理程序中传入其他参数,该怎么办?
这就和 绑定this
所选择的方式 有关了。
- 如果选择 在构造函数中使用
bind
绑定this
,就这么写。
handleClick(txt,e){
this.setState((state) => ({
isToggleOn:!state.isToggleOn
}));
console.log(txt);
}
render(){
return (
<button onClick={this.handleClick.bind(this,'hello world')}>{this.state.isToggleOn?'ON':'OFF'}</button>
)
}
- 如果 选择 使用箭头函数 绑定
this
,就这么写。
handleClick(txt,e){
this.setState((state) => ({
isToggleOn:!state.isToggleOn
}));
console.log(txt);
}
render(){
return (
<button onClick={(e)=>this.handleClick("hello world",e)}>{this.state.isToggleOn?'ON':'OFF'}</button>
)
}