lovecoding
/
VIP20


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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">
      // 原生DOM的事件绑定：1 通过事件属性：onclick,onkeyup,onchange,onblur,onsubmit，... 2 通过DOM对象的方法 addEventListener()

      // 在React中，只能通过 第一种方式 来注册事件。但是也有一点区别：原生事件属性 是由 “on + 事件类型” 组成的属性 ，因此在jsx上需要改成等价的驼峰命名即可，绑定的事件监听器必须是函数类型

      const root = ReactDOM.createRoot(document.querySelector('#root'));

      function App() {
        function handleChange() {
          console.log('changed');
          return () => {
            console.log('可以喇叭');
          };
        }
        return (
          <div>
            <p>
              <button
                onClick={() => {
                  alert('你点我啊！');
                }}
              >
                按钮
              </button>
            </p>
            <p>
              <input type="checkbox" onChange={handleChange} />
            </p>
            <p>
              <input
                type="text"
                onKeyUp={function () {
                  console.log(`output->keyup `);
                }}
              />
            </p>
            <p>
              <input type="text" onChange={handleChange()} />
            </p>
          </div>
        );
      }

      root.render(<App />);
    </script>
  </body>
</html>