009.React中的事件綁定與state修改

時間  2021-08-13
標籤 javascript html java react babel markdown dom 函數 this 欄目 React 简体版
原文   原文鏈接

原生JS事件綁定

<!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>
</head>
<body>
    <button id="bt1">按鈕1</button>
    <button id="bt2">按鈕2</button>
    <button id="bt3" onclick="changeWeather()">按鈕3</button>
    <script> const bt1 = document.getElementById('bt1') bt1.addEventListener('click',()=>{ console.log('按鈕1被點擊了') }) const bt2 = document.getElementById('bt2') bt2.onclick=()=>{ console.log('按鈕2被點擊了') } function changeWeather(){ console.log('按鈕3被點擊了') } </script>
</body>
</html>
複製代碼

React事件綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
    
    <!--這裏使用了babel用來解析jsx語法-->
    <script type="text/babel"> // 1.建立組件 class Weather extends React.Component{ constructor(props){ super(props) this.state={ isHot:true } } render(){ console.log(this) // this.state={ // isHot:true // } const {isHot} = this.state return ( <h1 id="span" onClick={changeWeather}>今每天氣很{isHot?'炎熱':'涼爽'}</h1> ) } } // 2.渲染，若是有多個渲染同一個容器，後面的會將前面的覆蓋掉 ReactDOM.render(<Weather/>,document.getElementById('test')) function changeWeather(){ console.log('標題被點擊了') } // 原生事件綁定 // const span = document.getElementById('span') // span.addEventListener('click',()=>{ // console.log('標題被點擊了') // }) // 或 // span.onclick=()=>{ // console.log('標題被點擊了') // } </script>
</body>
</html>
複製代碼

觸發事件時修改state

注：在Weather實例中，this指向實例能夠直接獲取和修改state，但在自定函數changeWeather中this指向window對象，獲取不到state對象，而且babel嚴格模式下不容許this直接指向window，打印this會報undefined。javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
    
    <!--這裏使用了babel用來解析jsx語法-->
    <script type="text/babel"> // 1.建立組件 class Weather extends React.Component{ constructor(props){ super(props) this.state={ isHot:true } // 解決this指向問題 this.changeWeather = this.changeWeather.bind(this) } render(){ const {isHot} = this.state return ( <h1 id="span" onClick={this.changeWeather}>今每天氣很{isHot?'炎熱':'涼爽'}</h1> ) } // changeWeather放在哪裏？ 放在Weather的原型對象上，供Weather實例使用 // 經過Weather實例調用changeWeather時，changeWeather中的this就是Weather實例 // 因爲changeWeather是做爲onClick的回調，因此不是經過實例調用的，是直接調用this不指向Weather實例，指向window // 類中的方法默認開啓局部的嚴格模式 因此changeWeather中的this爲undefined changeWeather(){ console.log('this.state.isHot',this.state.isHot) this.state.isHot = !this.state.isHot } } // 2.渲染，若是有多個渲染同一個容器，後面的會將前面的覆蓋掉 ReactDOM.render(<Weather/>,document.getElementById('test')) // function changeWeather(){ // console.log('標題被點擊了') // } // 原生事件綁定 // const span = document.getElementById('span') // span.addEventListener('click',()=>{ // console.log('標題被點擊了') // }) // 或 // span.onclick=()=>{ // console.log('標題被點擊了') // } </script>
</body>
</html>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程