要获取event对象的化
如果不使用this，直接绑定函数就可以了。
image.png
绑定不绑定this和传递event没有关系。event是默认参数传递过来的。
掌握1：如果要使用this，又要使用event
方式1,2,3都可以：
{/* 1.event参数的传递 */}
<button onClick={this.btnClick.bind(this)}>按钮1</button>(默认参数传递)
<button onClick={this.btnClick2}>按钮2</button>（默认参数传递）
<button onClick={(event) => this.btnClick(event)}>按钮3</button>
而且这里传入的event对象，不是原生的event对象，是react拿到原生的event对象以后，react又做了一层包装。但是之前原生的event里面的对象，在这里面都是有的，直接调用就行。
掌握2：如果要传递额外参数
{/* 2.额外的参数传递 */}
<button onClick={this.btnClick.bind(this, "kobe", 30)}>
按钮3(不推荐)
</button>
<button onClick={(event) => this.btnClick(event, "why", 18)}>
按钮4
</button>
使用bind传递的化，
btnClick(event, name, age) {
console.log("btnClick:", event, this);
console.log("name, age:", name, age);
}
event被传递到第三个参数的位置了。
image.png
这一点要注意，用bind的化，要这么写
<button onClick={this.btnClick.bind(this, "kobe", 30)}>
按钮3(不推荐)
</button>
btnClick( name, age， event) {
console.log("btnClick:", event, this);
console.log("name, age:", name, age);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>计数器</title>
</head>
<body>
<div id="root"></div>
<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel.js"></script>
<script type="text/babel">
// function foo(name, age, height) {}
// const bar = foo.bind("aaa", "kobe", 30)
// bar("event")
// 1.定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
message: "Hello World",
};
}
btnClick(event, name, age) {
console.log("btnClick:", event, this);
console.log("name, age:", name, age);
}
btnClick2 = (event) => {
console.log(this);
console.log(event);
};
render() {
const { message } = this.state;
return (
<div>
{/* 1.event参数的传递 */}
<button onClick={this.btnClick.bind(this)}>按钮1</button>
<button onClick={this.btnClick2}>按钮2</button>
<button onClick={(event) => this.btnClick(event)}>按钮3</button>
{/* 2.额外的参数传递 */}
<button onClick={this.btnClick.bind(this, "kobe", 30)}>
按钮3(不推荐)
</button>
<button onClick={(event) => this.btnClick(event, "why", 18)}>
按钮4
</button>
</div>
);
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
</script>
</body>
</html>
网友评论