React之事件处理
<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>事件處理</title>
</head>
<body>
? ? <!-- 準備好一個容器 -->
? ? <div id="test"></div>
? ? <!-- 核心庫 -->
? ? <script type="text/javascript" src="../js/react.development.js"></script>
? ? <!-- react-dom,操作dom -->
? ? <script type="text/javascript" src="../js/react-dom.development.js"></script>
? ? <!-- 引入babel，jsx轉為js -->
? ? <script type="text/javascript" src="../js/babel.min.js"></script>
? ? <!-- 此處一定要寫babel -->
? ? <script type="text/babel">
? ? ? ? //1.創建組件
? ? ? ? class Demo extends React.Component{
? ? ? ? ? ? /*
? ? ? ? ? ? （1）.onXxx函數（注意大小寫如onClick()）
? ? ? ? ? ? ? ? a.js onclick ?jsx onClick-----------為了更好的兼容性
? ? ? ? ? ? ? ? b.委托給組件外層，比如ul li ，委托給ul----------為了高效
? ? ? ? ? ? （2）. event.target得到發生事件的DOM元素對象-------------不要過度使用ref
? ? ? ? ? ?
? ? ? ? ? ? */
? ? ? ? ? ? /*
? ? ? ? ? ? 創建ref容器
? ? ? ? ? ? */
? ? ? ? ? ? myRef = React.createRef()
? ? ? ? ? ? myRef2 = React.createRef()
? ? ? ? ? ? //展示左側輸入框的數據
? ? ? ? ? ? showData = ()=>{ ? ? ? ?
? ? ? ? ? ? ? ?alert(this.myRef.current.value)
? ? ? ? ? ? } ? ?
? ? ? ? ? ? //展示右側輸入框的數據
? ? ? ? ? ? showData2 = (event) => {
? ? ? ? ? ? ? alert(event.target.value)
? ? ? ? ? ? } ? ? ? ? ? ?
? ? ? ? ? ?render(){ ?
? ? ? ? ? ? ? ?return(
? ? ? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ? ? ? <input ref={this.myRef} type="text" pacleholder="點擊按鈕提示數據"/>
? ? ? ? ? ? ? ? ? ? ? ? <button onClick={this.showData}>點我提示左側的數據</button>
? ? ? ? ? ? ? ? ? ? ? ? <input onBlur={this.showData2} ref={this.myRef2} type="text" pacleholder="失去焦點提示數據" />
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ?) ? ? ? ? ?
? ? ? ? ? ?} ? ? ? ? ?
? ? ? ? } ?
? ? ? ? //2.渲染組件到頁面
? ? ? ? ReactDOM.render(<Demo/>, document.getElementById("test")); ?
? ? </script>
</body>
</html>
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的React之事件处理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jq之$(“p:first“)
- 下一篇： jq之fadeOut()