|
|
@@ -0,0 +1,78 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
|
|
|
+ <script src="./babel.min.js"></script>
|
|
|
+ <!-- react的核心库 -->
|
|
|
+ <script src="./react.development.js"></script>
|
|
|
+ <!-- 解析react中的dom库 -->
|
|
|
+ <script src="./react-dom.development.js"></script>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="root"></div>
|
|
|
+ <script type="text/babel">
|
|
|
+ let root = ReactDOM.createRoot(document.getElementById("root"));
|
|
|
+ /**
|
|
|
+ * 1.监听器this 实际开发 类组件中
|
|
|
+ * 2.类组件 绑定事件 this.xxx 此时 this指向undefined
|
|
|
+ * 3.修改this指向：bind apply call
|
|
|
+ */
|
|
|
+ function News() {
|
|
|
+ return (
|
|
|
+ <button
|
|
|
+ onClick={() => {
|
|
|
+ let flower = "牡丹";
|
|
|
+ flower = "芍药";
|
|
|
+ console.log("点击", flower);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 按钮
|
|
|
+ </button>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ class Main extends React.Component {
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+ this.state = {
|
|
|
+ hi: "哈哈哈哈",
|
|
|
+ aa: "小明",
|
|
|
+ };
|
|
|
+ this.handleClick = this.handleClick.bind(this);
|
|
|
+ }
|
|
|
+ handleClick() {
|
|
|
+ // this.state.aa = '小红'
|
|
|
+ this.setState({
|
|
|
+ aa: "小红",
|
|
|
+ });
|
|
|
+ // 修改this指向：bind apply call
|
|
|
+ console.log(this, "指向");
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <p onClick={this.handleClick}>{this.state.aa}</p>
|
|
|
+ {/*
|
|
|
+ <p onClick={this.handleClick.bind(this)}>{this.state.aa}</p>
|
|
|
+ */}
|
|
|
+ <p
|
|
|
+ onClick={() => {
|
|
|
+ this.state.hi = "嘿嘿嘿";
|
|
|
+ this.setState({
|
|
|
+ hi: "嘿嘿嘿",
|
|
|
+ });
|
|
|
+ console.log(this, "休息休息");
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {this.state.hi}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ root.render(<Main />);
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e