lovecoding
/
VIP26


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 将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>
        <div id="btn">这是一个按钮</div>
        <!-- type="text/babel"
            告诉babel库 将jsx转成js

            this指向：
                方法中 this指向当前标签 
                改变this指向方法 
                    1.bind
                    2.箭头函数 ()=>{}
         -->
        <script type="text/babel">
            function onClick(){
                console.log(this)
            }
            function handleClick1(e){
                console.log(this,'正常') // undefined
                console.log(e,'事件') //存在事件对象
            }
            // 解构接受参数
            function handleClick2(e,...user){
                console.log(e.target)
                console.log(...user)
            }
            function handleClick3(e){
                console.log(e)
                // console.log(id)
            }
            // 第一种
            document.getElementById("btn").onclick = onClick;
            var aaaa = {name:"My name is Tutu"};
            // 改变this指向：call bind apply 
            // 第二种
            // let element = <div onClick={onClick.bind(aaaa)}>这是第二个按钮</div>
            let element = (
                <div>
                  <p onClick={handleClick1.bind(aaaa)}>事件1</p>
                    {/*套壳*/}
                    <p onClick={(e)=>{
                        handleClick2(e,3,444,5555)
                    }}>事件2</p>
                    {/*
                        传递多个参数时 接收参数需要解构
                    */}
                    <p onClick={handleClick3.bind(null,44,55)}>事件3</p>
                    {/* null不占位 */}
                    
                </div>
            )
            {/*
                默认传递事件对象
                bind虽然可以改变this指向 但是位置固定并不灵活
                箭头函数 可以套壳比较灵活 
                
            **/}
            let newPage = ReactDOM.createRoot(document.querySelector("#root"));
            newPage.render(element)
        </script>

    </body>
</html>