|
|
@@ -0,0 +1,43 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <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">
|
|
|
+ const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
|
+ // 事件绑定
|
|
|
+ // 1.DOM中 事件绑定： onClick onChange onBlur onSubmit.....
|
|
|
+ // 2.事件流中的事件绑定： addEventListener('click/mousedown...',function(){},true(鼠键捕获)/false（事件冒泡）) removeEventListener.....
|
|
|
+ // jsx语法 在 script标签书写 不需要获取元素了
|
|
|
+ function App() {
|
|
|
+ function handleClick() {
|
|
|
+ // alert("点击触发了")
|
|
|
+ console.log("触发")
|
|
|
+ }
|
|
|
+ // 调用 名字（） => 立即执行
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {/*点击事件绑定*/}
|
|
|
+ <p onClick={handleClick}>点击</p>
|
|
|
+ {/*不提倡在标签内写方法 页面排版错乱*/}
|
|
|
+ <input type="text" onChange={function(){
|
|
|
+ alert("改变了")
|
|
|
+ }} />
|
|
|
+ <input type="text" onBlur={() => {
|
|
|
+ console.log("失焦了")
|
|
|
+ }} />
|
|
|
+ <input type="submit" onClick={handleClick()} />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ root.render(<App/>)
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e