首页 > 其他分享 >react函数调用

react函数调用

时间:2024-03-12 15:26:50浏览次数:17  
标签:调用 函数调用 react state props date clickHandler2 public

import * as React from "react"
    // 接收参数
interface IProps{
    work?:string
}

interface State {  //名字可以随便起
    date: string; // 定义 state 的结构  
  }  
    
export default class Hello extends React.Component<IProps,State>{
    // 组件初始化构造器
    public constructor(props:any){
        super(props);
        this.state = {  
            date: '11', // 初始化 state  
          };  
        //   参数调用的第一种方法 这里要先这么写 下面clickHandler2函数才能直接调用
        this.clickHandler2=this.clickHandler2.bind(this)
    }

    //参数调用的第2种方法----这样写就可以直接调用
    public clickHandler=()=>{
        this.setState({date:"111"})
    }

    //   参数调用的第一种方法
    public clickHandler2(){
        this.setState({date:"11"})
    }

    public render(){
        return (
            <div>
                
                Hello: {this.props.title}
                <br/>
                Hello: {this.props.age}
                {this.props.work}
                <br/>
                <p>当前日期: {this.state.date}</p> 
        //点击调用方法       
        <button onClick={this.clickHandler}>更新日期</button>  
        <button onClick={this.clickHandler2}>更新日期</button>
            </div>
            
        )
    }

}

 

标签:调用,函数调用,react,state,props,date,clickHandler2,public
From: https://www.cnblogs.com/kaibindirver/p/18068362

相关文章

  • ts跟react的学习点记录
    TS:1.ts与js的区别ts:js的超集用于解决大型项目的代码复杂性,可以在编辑期间发现并纠正错误,强类型,支持静态和动态类型,最终编译成js,使浏览器可以理解,支持模块、泛型和接口js:一种脚本语言,用于创建动态网页,作为一种解释型语言,只能在运行的时发现错误,不支持模块、泛型和接口react学习点:1......
  • c++从零实现reactor高并发服务器!!!
    环境准备linux虚拟机安装升级c/c++编译器gcc/g++选项源代码文件1源代码文件2...源代码文件n-o指定输出的文件名(不能和源文件同名默认是a.out)-g调试-On链接时优化减小体积(n=1-3)-c只编译用于生成库-std=c++11支持c++11标准安装man功能man级别接口......
  • ReactRouter 基础
    ReactRouter(路由)目录ReactRouter(路由)1、前端路由2、创建路由开发环境3、快速开始抽象路由模块路由导航1、路由导航2、声明式导航3、编程式导航路由导航传参searchParams传参params传参嵌套路由配置1、嵌套路由2、嵌套路由配置3、默认二级路由4、404路由配置5、2种路由模式1......
  • react面试2
    纯函数+不可变值 JSX的本质等同vue的模板createElement等同h函数第一个参数可能是组件也可能是tag,根据首字母大小写来区分是否是组件第二个参数是null或者{} 合成事件 为什么要这样使用?更好的兼容性和跨平台,尽量摆脱了DOM事件的逻辑,然后自己去实现一......
  • react面试
     <pdangerouslySetInnerHTML={{__html:rowHtml}}>事件bind(this)this是undefined静态方法来定义不需要bind:handle=()=>{} event参数event.target指向当前元素,表示绑定在哪里event.currentTarget输出也是当前元素,但是是假象不是原声的event是Synthe......
  • react-router路由懒加载/路由守卫
    路由懒加载目前在网络上搜到的路由懒加载方式基本都是通过React.lazy()方法配合Suspense的方式,可能是受vue-router的影响,我很不喜欢这种方式,不喜欢就改变。上代码import{createBrowserRouter}from"react-router-dom";constrouter=createBrowserRouter([{......
  • react-pdf 实现pdf文件预览功能
    参考文档https://www.npmjs.com/package/react-pdfhttps://github.com/wojtekmaj/react-pdf#readme 一、概述react项目中,很多时候(尤其是需展示报告的页面)会遇到需要预览pdf文件的需求。而据调研,使用react-pdf插件可以很好地实现这个功能。  二、操作步骤1.安......
  • React设计原理解密及核心源码解读
    一、React基础回顾1、react介绍React是一个用于构建用户界面的JavaScript库,它只负责应用的视图层,帮助开发人员构建快速且交互式的web应用程序。React使用组件的方式构建用户界面。2、JSX语法回顾在React中使用JSX语法描述用户界面,它是一种JavaScript语法扩展......
  • React — Redux详解
    Redux是一个用于JavaScript应用程序的状态管理库。它可以帮助您管理应用程序中的状态,并确保状态的一致性和可预测性。Redux主要用于处理大型应用程序中的复杂状态逻辑,例如跨组件共享状态、处理异步数据流等。Redux的核心概念包括:Store(存储):Redux应用程序的状态......
  • React jsx 语法解析 & 转换原理
    jsx介绍jsx是一种JavaScript的语法扩展(eXtension),也在很多地方称之为JavaScriptXML,因为看起就是一段XML语法,用于描述UI界面,并且可以和JavaScript代码结合使用。比起vue中的模板语法,更加灵活,且不需要学习模板语法中的特定标签,比如:v-if、v-for、v-bind等,而是直接使用JavaScript语......