笔记十、定义state和事件处理的简写方式

阳光穿透心脏的1/2处 2024-05-01 16:22 43阅读 0赞

**简介：定义state和事件处理的简写方式**

*  简写state
    
     *  在类中不写构造器直接增加一个state的对象属性
     *  将普通函数换成箭头函数的写法

App.jsx

import React from "react";
    
    // 所有 React 组件必须像纯函数一样保护它的 props 不被更改
    class App extends React.Component {
    
        // 点击更改 state
        state = {isWash: false};
    
        render() {
            // 打印指向 App 的对象
            // handleClick 方法本来是定义在 App 原型之上的,直接打印 handleClick 会找不到,要 this.handleClick
            console.log(this);
            return (
                <>
                    <button onClick={this.handleClick} style={
       {color: "blueviolet"}}>
                        请点击
                    </button>
                    <div>
                        老王今天 {this.state.isWash ? "去" : "没去"} 洗脚了
                    </div>
                </>
            )
        };
    
        // 改造成 es6 箭头函数(箭头函数是没有 this 指向的)不用处理 this 指向
        // 定义函数和变量的时候不用 const 和 let
        handleClick = () => {
            console.log("click", this)
            this.setState({isWash: !this.state.isWash})
        }
    
    }
    
    export default App

发表评论取消回复

表情：

评论列表（有 0 条评论，43人围观）

还没有评论，来说两句吧...

相关阅读

相关笔记十、定义state和事件处理的简写方式

在类中不写构造器直接增加一个state的对象属性。将普通函数换成箭头函数的写法。

阳光穿透心脏的1/2处/ 2024年05月01日 16:22/ 0 赞/ 44 阅读

相关详解react中的state的简写方式

-------------------- 什么是state -------------------- 我们都说React是一个状态机，体现是什么地方呢，就是体现在s

迈不过友情╰/ 2023年09月26日 19:56/ 0 赞/ 96 阅读

相关十一、事件处理

目录一、事件处理基础 1.1 示例 1.2 简洁指定监听器 1.3 改变观感 1.4 适配器类二、动作三、鼠标事件四、AWT事件继承层次

￡神魔★判官ぃ/ 2023年06月15日 06:46/ 0 赞/ 5 阅读

相关 ② React 面向组件编程(state、props、refs)、事件处理

查看专栏其它文章： [① React 介绍及JSX简单使用][React _JSX] -------------------- React 组件的理解

深藏阁楼爱情的钟/ 2022年10月28日 14:22/ 0 赞/ 201 阅读

相关 C#中的事件和事件处理

C\中的事件，我觉得和MFC的消息作用在某些方面是差不多的。这个项目中用到的需求是两个类之间的数据交互，首先肯定是分为一个触发事件的类，一个处理事件的类。 1）

雨点打透心脏的1/2处/ 2022年08月13日 12:55/ 0 赞/ 184 阅读

相关 Java学习笔记--------Java的事件和事件处理接口

Java将所有组件可能发生的事件进行分类，具有共同特征的事件被抽象为一个事件类AWTEvent，其中包括ActionEvent类(动作事件)、MouseEvent类(鼠标事件)

﹏ヽ暗。殇╰゛Y/ 2022年08月02日 14:36/ 0 赞/ 187 阅读

相关 java事件处理机制自定义事件

ava中的事件机制的参与者有3种角色：　　1.event object：事件状态对象，用于listener的相应的方法之中，作为参数，一般存在与listerner的方法之中

桃扇骨/ 2022年06月07日 01:13/ 0 赞/ 310 阅读

相关 Android学习笔记(36):Android的两种事件处理方式

Android提供了两种事件处理的方式：基于回调的事件处理和基于监听的事件处理。我们来说的容易理解一点：（1）基于回调的事件处理就是继承GUI组件，并重写该组件的事

一时失言乱红尘/ 2022年01月26日 03:09/ 0 赞/ 298 阅读

相关 VB 自定义事件和处理

Public Class Form1 Private Sub Service_Synchr(ByVal index As Integer)

冷不防/ 2021年12月24日 14:49/ 0 赞/ 257 阅读

相关 es6 对象定义的简写方式

ES6 对象的简写方式对象内的属性:若对象内的属性和外部变量相同，并且也是使用外部变量的值，那在定义对象的属性的时候，直接写变量名即可，省略值

小灰灰/ 2021年07月24日 13:13/ 0 赞/ 371 阅读