生活随笔
收集整理的這篇文章主要介紹了
reactjs中的事件处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
(1).通過onXxx屬性指定事件處理函數(注意大小寫)
a.React使用的是自定義(合成)事件, 而不是使用的原生DOM事件 —————— 為了更好的兼容性
b.React中的事件是通過事件委托方式處理的(委托給組件最外層的元素) ————————為了的高效
(2).通過event.target得到發生事件的DOM元素對象 ——————————不要過度使用ref
<!DOCTYPE html>
<html lang="en">
<head><meta 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">class Demo extends React.Component{myRef = React.createRef()myRef2 = React.createRef()showData = (event)=>{console.log(event.target);alert(this.myRef.current.value);}showData2 = (event)=>{alert(event.target.value);}render(){return(<div><input ref={this.myRef} type="text" placeholder="點擊按鈕提示數據"/> <button onClick={this.showData}>點我提示左側的數據</button> <input onBlur={this.showData2} type="text" placeholder="失去焦點提示數據"/> </div>)}}ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的reactjs中的事件处理的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
