zoukankan      html  css  js  c++  java
  • React属性一state—修改state中的值

    任务:界面上有一行文字“甄姬”,当鼠标点击甄姬时,文字变为“安琪拉”;再点击再互换。

     1 <script type="text/babel">
     2     class MyComponent extends React.Component{
     3       state = {
     4         flag:true,
     5       }
     6       handleClick= ()=>{  //使用箭头函数,改变this指向,函数内部的this指向组件MyComponent
     7         const {flag} = this.state;
     8         // 每次使用setState()都会重新渲染render
     9         this.setState({ 
    10           flag:!flag,
    11         })
    12       }
    13       render(){
    14         const {flag} = this.state;
    15         var msg = flag ? "甄姬" : "安琪拉";
    16         return(
    17           <h1 onClick={this.handleClick}>{msg}</h1>
    18         )
    19       }
    20     }
    21     ReactDOM.render(<MyComponent />,document.getElementById("root"));
    22   </script>
    这里是折叠代码

                  

  • 相关阅读:
    node.js入门
    分布式爬虫
    ES6入门
    Vue.js入门
    用scrapy爬取亚马逊网站项目
    垃圾回收器
    HTTP协议详解
    有效的邮箱地址
    C#中正则表达式的使用
    抽象类
  • 原文地址:https://www.cnblogs.com/minyDong/p/12465793.html
Copyright © 2011-2022 走看看