事件触发
<!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="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script type="text/babel">
class App extends React.Component{
// 事件处理方法
show(){
alert('你点击到我了!')
}
// 返回一个标签
showName(){
return <h1>hello react</h1>
}
render(){
return (
<div>
{/* 调用显示标签 方法调用 立即调用方法执行*/}
{this.showName()}
{/* JSX语法里的注释 */}
{/* 事件触发的方法不需要加(),加括号就立即调用了，这里点击事件触发后，再调用方法 */}
<button onClick={this.show}>点击显示</button>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
</script>
</body>
</html>
事件触发的方法this指向问题
<!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>事件触发后this指向</title>
</head>
<body>
<div id="root"></div>
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script type="text/babel">
class App extends React.Component {
// 类属性 类变量
name = "hello,react";
show1(msg) {
// alert('show1触发了')
/**
* 事件触发后 this指向谁?
* 默认情况指向window
* 严格模式下指向undefined
* React默认是严格模式
* this指向保持怎么做？
* 解决方案:绑定this操作
* bind 指绑定
* apply,call 绑定之后会调用方法
*
*/
// this.属性名称 调用属性
// this 组件对象
console.log(this);
console.log(this.name);
console.log(msg);
}
render() {
return (
<div>
{/* 方法一 定义的是普通函数 bind绑定this */}
<button onClick={this.show1.bind(this,'我是信息')}>点击显示1</button>
{/* 方法二 定义的是箭头函数 this指向不丢失 */}
<button onClick={this.show2}>点击显示2</button>
{/* 方法三 事件触发的普通方法this丢失*/}
{/*事件触发箭头函数this指向正常*/}
<button onClick={()=>this.show1('我是信息')}>点击显示3</button>
</div>
);
}
// 箭头函数定义的方法 this 指向保持
show2 = ()=>{
console.log(this.name);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
