React事件监听和State状态修改方式

2024-09-27 14:05:15

React事件监听和State状态修改

on*函数可直接使用，但只能使用在html标签上，自己创建的组件标签不可

组件可以增加state状态，修改用setState方法，修改会有缓存，只能保证在渲染到页面之前会改好。所以setState后立马去使用值可能是不对的

狗子组件1：点击会打印bark和run

class Dog extends Component {
  bark () {
    console.log('bark')
  }
  
  run () {
    console.log('run')
  }
  
  render () {
    return (<div onClick={
    //有两个方法需要实现，所以用一个函数进行封装
      ()=>{
        this.bark();
        this.run();
      }
    }>DOG</div>)
    }
}
ReactDOM.render(<Dog/>,document.querySelector('#root'));

狗子组件2：增加bark和run状态，开始为false，点击变成true，1s后还原成false

class Dog extends Component {
  constructor () {
    super()
    this.state={
      bark:false,
      run:false
    }
  }

  clickYeah () {
    this.setState({
      bark: true,
      run: true
    })
    //因为setState会有缓存，值后面才会变，所以这里打印出来还是false
    console.log('bark'+this.state.bark);
    console.log('run'+this.state.run);
    setTimeout(()=>{
      //1s之后将值改回成false，所以这里打印出来还是false。如果想要检验前面修改成true有没有生效，可以将这里setState修改成false的步骤先注释掉
      this.setState({
        bark: false,
        run: false
      })
      console.log('bark'+this.state.bark+'run'+this.state.run);
    },1000)
  }

  render () {
    return (<div onClick={this.clickYeah.bind(this)}>DOG</div>)
  }
}
ReactDOM.render(<Dog/>,document.querySelector('#root'));

React事件监听相关例子

 var TestClickComponent = React.creatsClass({
    handleClick: function(event){

    //操作DOM节点

        var msg = React.findDOMNode(this.refs.tip);
         if(msg.style.display === 'none'){
            msg.style.display = 'inline';
        }else{
            msg.style.display = 'none';
        }

        //阻止事件的冒泡和默认行为

        event.stopPropagation();
        event.preventDefault();
    },

    render: function(){

        return(
            <div>
                <button onClick={this.handleClick}>显示/隐藏</button>
                <span ref="tip">message</span>
            </div>
        );
    }
});

var TestInputComponent = React.createClass({
    getInitialState: function(){
        return{
            inputContent: ' '
        }
    },

    changeHandler:function(event){

      //改变state的值

        this.setState({
            inputContent:event,target.value
        });

        event.preventDefault();
        event.stopPropagation();
    },

    render: function(){

        return(
            <div>
                <input type="text" onChange={this.changeHandler}/>
                <span>{this.state.inputContent}</span>
            </div>
        );
    }
});

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

React 三大属性之state的使用详解

React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了.state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染.这里分别介绍一下在类和函数组件中state的写法: 类组件 class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 r
详细分析React 表单与事件

本章节我们将讨论如何在 React 中使用表单. HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态. 在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态,并根据用户输入进行更新.但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新. 一个简单的实例在实例中我们设置了输入框 input 值 value =
React的生命周期详解

一.React生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁初始化 1.getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性. 2.getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state.此时可以访问this.props 3.componentWillMount() 组件初始化时只调用,以后组件更新不调用,整个生命周期
React事件监听和State状态修改方式

目录 React事件监听和State状态修改 React事件监听相关例子 React事件监听和State状态修改 on*函数可直接使用,但只能使用在html标签上,自己创建的组件标签不可组件可以增加state状态,修改用setState方法,修改会有缓存,只能保证在渲染到页面之前会改好.所以setState后立马去使用值可能是不对的狗子组件1:点击会打印bark和run class Dog extends Component { bark () { console.log('ba
React实现监听粘贴事件并获取粘贴板中的截图

目录监听粘贴事件并获取粘贴板中的截图 TSX中给组件添加监听粘贴事件从粘贴板获取截图文件 React监听事件事件监听绑定的事件函数相关扩展监听粘贴事件并获取粘贴板中的截图 TSX中给组件添加监听粘贴事件 const pasteImageRef = useRef<HTMLDivElement>(null); useEffect(()=>{ //给组件添加监听粘贴事件 pasteImageRef.current?.addEventListener('paste',
Spring事件监听机制观察者模式详解

目录前言观察者模式观察者的角色定义 Java中的事件机制 Spring中的事件机制 Spring事件监听案例小结前言 Spring中提供了一套默认的事件监听机制,在容器初始化时便使用了这套机制.同时,Spring也提供了事件监听机制的接口扩展能力,开发者基于此可快速实现自定义的事件监听功能. Spring的事件监听机制是在JDK事件监听的基础上进行的扩展,也是在典型观察者模式上的进一步抽象和改进.所以,结合Spring的事件监听机制与观察者模式来学习,可以达到理论与实践的完美融合. 本
Spring的事件监听机制示例详解

前言最近公司在重构广告系统,其中核心的打包功由广告系统调用,即对apk打包的调用和打包完成之后的回调,需要提供相应的接口给广告系统.因此,为了将apk打包的核心流程和对接广告系统的业务解耦,利用了spring的事件监听特性来满足需求.以下说明spring的事件机制的相关内容. 首先spring事件分为事件发布者(EventPublisher).事件监听者(EventListener),还包括一个事件广播者(这个是spring实现相关,这一节不讨论).使用spring事件机制,需要自定义事件发布
Layui事件监听的实现(表单和数据表格)

一.表单的事件监听先介绍一下几个属性的用法 1.lay-filter 事件过滤器相当于选择器,layui的专属选择器 2.lay-verify 验证属性属性值可以是 :required必填项, phone手机号,email邮箱,url网址,number数字,date日期,identity身份证.这个相当于正则判断,当然你也可以定义自己的正则,做一些复杂的判断,例如: <input type="text" lay-verify="required">
前端项目中的Vue、React错误监听

目录一. Vue 错误监听 window.onerror errorCaptured 生命周期 errorHandler 异步错误答案扩展二.React 错误监听 ErrorBoundary dev 和 build 事件报错异步错误答案扩展一. Vue 错误监听题目: 如何统一监听 Vue 组件报错? 分析: 真实项目需要闭环,即考虑各个方面,除了基本的功能外,还要考虑性能优化.报错.统计等. 而个人项目.课程项目一般以实现功能为主,不会考虑这么全面.所以,没有实际工作经验的同
.NET事件监听机制的局限与扩展分析

本文实例分析了.NET事件监听机制的局限与扩展.分享给大家供大家参考.具体分析如下: .NET中把"事件"看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. 复制代码代码如下: // C# someButton.Click += OnSomeButtonClick; 复制代码代码如下: // Java someButton.addActionListener( new ActionListener(){
JS 事件绑定、事件监听、事件委托详细介绍

在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件
详解React Native监听Android回退按键与程序化退出应用

详解React Native监听Android回退按键与程序化退出应用前言我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!
android截图事件监听的原理与实现

Android系统没有对用户截屏行为提供回调的api,所以我们只能走野路子来获取用户是否截屏了.一般大家都会采用如下两种方法 1.监听截屏图片所在目录变化(FileObserver) 2.监听媒体库的变化(ContentObserver) 上面两种方法均不是万能的,需要结合使用才能达到良好的效果,首先看看如何监控目录在android中,我们可以通过FileObserver来监听目录变化,先来看看如何使用 private static final File DIRECTORY_PICTURES

React事件监听和State状态修改方式

目录

React事件监听和State状态修改

React事件监听相关例子

相关推荐

随机推荐