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教程