React—修改state中的值

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

React—修改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>
这里是折叠代码

              

上一篇:侯策《前端开发核心知识进阶》读书笔记——React基础


下一篇:VUE React