|
|
@@ -0,0 +1,60 @@
|
|
|
+<!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>Document</title>
|
|
|
+ <script src="../../babel.min.js"></script>
|
|
|
+ <script src="../../react.development.js"></script>
|
|
|
+ <script src="../../react-dom.development.js"></script>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="root"></div>
|
|
|
+ <script type="text/babel">
|
|
|
+ // 原生DOM的事件绑定：1 通过事件属性：onclick,onkeyup,onchange,onblur,onsubmit，... 2 通过DOM对象的方法 addEventListener()
|
|
|
+
|
|
|
+ //一： 在React中，只能通过 第一种方式 来注册事件。但是也有一点区别：原生事件属性 是由 “on + 事件类型” 组成的属性 ，因此在jsx上需要改成等价的驼峰命名即可，绑定的事件监听器必须是函数类型
|
|
|
+
|
|
|
+ // 二：如果获取事件对象。当React事件触发时，事件的监听器会被传入一个唯一参数 就是 事件对象，一般参数名为 e，ev， event。
|
|
|
+
|
|
|
+ const root = ReactDOM.createRoot(document.querySelector('#root'));
|
|
|
+
|
|
|
+ function App() {
|
|
|
+ function handleChange() {}
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <button
|
|
|
+ onClick={(e) => {
|
|
|
+ // alert('你点我啊！');
|
|
|
+ console.log(e);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 按钮
|
|
|
+ </button>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ onClick={(e) => {
|
|
|
+ console.log(`output->e`, e);
|
|
|
+ console.log(e.target.value);
|
|
|
+ }}
|
|
|
+ onKeyUp={function (e) {
|
|
|
+ console.log(`output->keyup `);
|
|
|
+ console.log(e);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <input type="text" onChange={handleChange} />
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ root.render(<App />);
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
大侠