123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!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>
- <div id="btn">这是一个按钮</div>
- <script type="text/babel">
- function onClick(){
- console.log(this)
- }
- function clickFirst(e){
- console.log(this,"正常"),
- console.log(e,'事件')
- }
- function clickSecond(e,...user){
- console.log(e.target)
- console.log(...user)
- }
- function clickThird(e){
- console.log(e)
- }
- document.getElementById("btn").onclick = onClick;
- var aaa = {name:"My name is zzb"};
- let element = (
- <div>
- <p onClick={clickFirst.bind(aaa)}>事件一</p>
- <p onClick={(e)=>{
- clickSecond(e,3,444,5555)
- }}>事件二</p>
- <p onClick={clickThird.bind(null,3)}>事件三</p>
- </div>
- )
- let newpage = ReactDOM.createRoot(document.getElementById("root"));
- newpage.render(element)
- </script>
- </body>
- </html>
|