react事件
2019-04-19 本文已影响0人
樊小勇
- bind 绑定事件的指向
<script>
var person ={
language:'粤语',
speak(){
// 打印指向 this指向调用者
console.log(this);
console.log(`他会讲${this.person.language}`)
}
}
// 通常情况下调用 这个时候this指向person
person.speak();
// 为了多次调用方便我们把speak给一个对象
var speak = person.speak
speak();
// 这个时候对打印出，他会讲undefinde 因为这个时候this指向windows而wind没有language
// 这个情况下我们可以用到bind函数来绑定函数的指向
var speak = person.speak.bind(person);
speak();
</script>
- 实例应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- react框架文件 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- react用来渲染页面的文件 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<!-- 用来编译jsx语法的库 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
// 定义一个react组件
class Demo extends React.Component{
constructor(){
super();
// 让this.login的this指向Demo组件
this.login=this.login.bind(this);
}
render() {
return(
<div>
<button onClick={this.login}>
你好呀
</button>
</div>
)
}
login(){
alert('傻子')
}
}
ReactDOM.render(
<Demo />,
document.querySelector('#app')
)
</script>
</body>
</html>
- 事件传参并显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- react框架文件 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- react用来渲染页面的文件 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<!-- 用来编译jsx语法的库 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class Demo extends React.Component{
constructor(props){
super(props);
this.toDetail = this.toDetail.bind(this);
}
toDetail(id){
console.log(event);
alert(id);
}
render() {
return (
<div>
<ul>
<li><button onClick={()=>{this.toDetail(1001)}}>电影1</button></li>
<li><button onClick={()=>{this.toDetail(1002)}}>电影2</button></li>
<li><button onClick={()=>{this.toDetail(1003)}}>电影3</button></li>
</ul>
</div>
)
}
}
ReactDOM.render(
<Demo/>,
document.querySelector('#app')
)
</script>
<!-- 小技巧,需要联想功能的时候先别在script里加type="text/babel" -->
<!-- 但是编译完了之后记得要加上 -->
</body>
</html>
