|
|
@@ -0,0 +1,63 @@
|
|
|
+<!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>
|
|
|
+ <script type="text/babel">
|
|
|
+ // 原生DOM的事件绑定:
|
|
|
+ // 1.通过事件属性 onclick,onkeyup,onchange....
|
|
|
+ // 2.通过DOM对象 addEventListener()/removeEventListener()
|
|
|
+
|
|
|
+ // 在React中 ， 只能通过第一种方式来注册事件.
|
|
|
+ // 区别：
|
|
|
+ // 原生事件属性，是由"on + 事件类型"组成的属性，
|
|
|
+ // 在jsx上需要改成等价的驼峰命名格式，并且，绑定的事件监听器必须是函数类型
|
|
|
+ const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
|
+ function App() {
|
|
|
+ function handleClick() {
|
|
|
+ console.log("哈哈")
|
|
|
+ return () => {
|
|
|
+ console.log("33")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function handleChange() {
|
|
|
+ console.log("11")
|
|
|
+ return () => {
|
|
|
+ console.log("22")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <button onClick={()=> {
|
|
|
+ console.log("你好")
|
|
|
+ }}>点击</button>
|
|
|
+ <button onClick={handleClick}>点击</button>
|
|
|
+ <button onClick={handleClick()}>点击1</button>
|
|
|
+ <br/>
|
|
|
+ <br/>
|
|
|
+ <input type="text" onKeyUp={function() {
|
|
|
+ console.log('抬起')
|
|
|
+ }} />
|
|
|
+ <br/>
|
|
|
+ <br/>
|
|
|
+ <input type="text" onChange={()=>{
|
|
|
+ console.log("改变")
|
|
|
+ }} />
|
|
|
+ {/*
|
|
|
+ <input type="text" onChange={handleChange()} />
|
|
|
+ */}
|
|
|
+ <input type="checkbox" onChange={handleChange()} />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ root.render(<App/>);
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
郑柏铃