lovecoding
/
web0715


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!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.DOM中 事件绑定：onClick onChange onBlur onSubmit
         * 2.事件流中的事件绑定：addEventListener('click/mousemove',function(){},true(捕获)/false(冒泡))
         * jsx语法
        */
       function App() {
        // 逻辑
        function showMain() {
            alert("我是main");
        }
       function saveMain(){
        console.log("提交")
            alert("我是saveMain");
        }
        // 渲染的jsx语法
        return (
            <div>
                {/*点击事件绑定*/}
                <p onClick={showMain}>你好</p>
                {/*change事件绑定*/}
                <input type="text" onChange={function() {
                    console.log("改变了")
                }} />
                {/*blur事件绑定*/}
                <input type="text" onBlur={() =>{
                    console.log("失焦了")
                }}/>
                {/*submit事件绑定*/}
                <button onClick={saveMain}>提交</button>
            </div>
        )
       }
    //    box.addEventListener
        root.render(<App/>)        
    </script>
</body>
</html>