12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <!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="btn">第一种</div>
- <div id="root"></div>
- <script type="text/babel">
- // 第一种 this指向
- function handleClick(){
- console.log(this)
- }
- document.getElementById("btn").onclick = handleClick
- // 第二种 改变this指向
- // call apply bind
- let person = {
- str:"我是一个字符串"
- }
- // let element = <div onClick={handleClick.bind(person)}>第二种</div>
- function handleClick1(e){
- console.log(this,'正常') // undefined
- console.log(e,'事件') //存在事件对象
- }
- function handleClick2(e,...arg){
- console.log(e.target)
- console.log(arg)
- }
- function handleClick3(e){
- console.log(e)
- }
- let element = (
- <div>
- <p onClick={handleClick1.bind(person)}>事件1</p>
- {/*套壳*/}
- <p onClick={(e)=>{
- handleClick2(e,3,444,5555)
- }}>事件2</p>
- {/*
- 传递多个参数时,接受参数需要解构
- null 不占位
- 默认传递的参数是事件对象
- bind虽然可以改变this指向,但是位置固定并不灵活
- 箭头函数 可以套壳比较灵活
- */}
- <p onClick={handleClick3.bind(null,111)}>事件3</p>
- </div>
- )
- ReactDOM.createRoot(document.querySelector('#root')).render(element)
- </script>
- </body>
- </html>
|