當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React之事件处理

發布時間：2024/9/27 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>

? ?

? ? <script type="text/javascript" src="../js/react-dom.development.js"></script>

? ?

? ? <script type="text/javascript" src="../js/babel.min.js"></script>

? ?

? ? <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之事件处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

之事
React