2. 事件绑定

src/App.js

@@ -41,11 +41,22 @@ function App() {
     ]
 
     let arr2 = [
-    FnHello({name:"arr1"}),
-    FnHello({name:"arr2"}),
-    FnHello({name:"arr3"}),
+        FnHello({name: "item1"}),
+        FnHello({name: "item2"}),
+        FnHello({name: "item3"}),
     ]
 
+    function clickHandler2() {
+        console.log("按钮2被点击")
+    }
+
+    function clickHandler3(arg, e) {
+        console.log("按钮3被点击, 参数 " + arg)
+        console.log("合成的事件对象", e)
+        // 阻止事件冒泡
+        e.stopPropagation()
+    }
+
     return (
         <div className="App">
             <header className="App-header">
@@ -65,6 +76,21 @@ function App() {
                 {arr1}
 
                 {arr2}
+
+
+                <div style={{display: 'flex'}}>
+                    {/*事件绑定*/}
+                    <button onClick={() => {
+                        console.log("按钮1被点击")
+                    }}>按钮1
+                    </button>
+
+                    <button onClick={clickHandler2}>按钮2</button>
+                </div>
+                <div>
+                    <button onClick={clickHandler3.bind(this, "按钮3")}>按钮3</button>
+                    <button onClick={(e) => clickHandler3("按钮3", e)}>按钮3</button>
+                </div>
             </header>
         </div>
     );