React day1-事件处理:完善笔记

20_React.js_VIP22/React.js快速进坑.md

@@ -247,7 +247,45 @@ ReactDOM.createRoot(document.querySelector('#root')).render(element);
 
 ### 4.3 给监听器传入额外参数
 
+默认监听器中只会接收一个参数，即事件对象。
 
+如果想要传入额外参数，像这样
+
+```jsx
+function deleteListItem(e, id) {
+  console.log(e, id);
+}
+let element = (
+  <ul>
+    <li>
+      <div>
+        <p>list - 1</p>
+        {/* 使用箭头函数套壳 */}
+        <button
+          onClick={(e) => {
+            deleteListItem(e, 1);
+          }}
+        >
+          删除
+        </button>
+      </div>
+    </li>
+    <li>
+      <div>
+        <p>list - 2</p>
+        {/* 也可以使用bind函数 */}
+        <button onClick={deleteListItem.bind(null, 2)}>删除</button>
+      </div>
+    </li>
+  </ul>
+);
+
+ReactDOM.createRoot(document.querySelector('#root')).render(element);
+```
+
+- bind函数的实现 会导致传入参数位置固定，不够灵活
+- 自己套壳实现 可以自行传入参数，因此位置灵活
+- 实际应用 都可以。
 
 ##  5. 组件