React事件监听相关例子

阳光穿透心脏的1/2处 2022-05-21 12:43 154阅读 0赞

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>
    
            );
    
        }
    
    });

发表评论取消回复

表情：

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

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

相关阅读

相关事件Event监听相关——spring的事件监听相关

应用场景：事件驱动模型简介事件驱动模型也就是我们常说的观察者，或者发布-订阅模型。理解它的几个关键点： 1、首先是对象间的一对多的关系；最简单的如交通信号灯，...

谁借莪１个温暖的怀抱￠/ 2024年04月17日 19:48/ 0 赞/ 86 阅读

相关 vue监听键盘事件的相关总结

按键修饰符在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： 1 2 <!-- 只有在 \`key\` 是

迷南。/ 2022年10月25日 00:48/ 0 赞/ 343 阅读

相关事件监听机制（五）再话Jdk事件监听到Spring框架事件监听

事件监听机制（五）再话Jdk事件监听到Spring框架事件监听背景熟悉`Spring` 框架的同学都清楚，`Spring`容器启动到销毁事件监听机制始终贯穿，那

r囧r小猫/ 2022年09月06日 00:13/ 0 赞/ 305 阅读

相关 React事件监听相关例子

var TestClickComponent = React.creatsClass({ handleClick: function(even

阳光穿透心脏的1/2处/ 2022年05月21日 12:43/ 0 赞/ 155 阅读

相关 React-Native中事件监听DeviceEventEmitter

基本语法 react-native中事件监听时使用插件DeviceEventEmitter这个来进行实现，在这里我们进行讲解一下基本语法，如下所示 1.设置监听

朱雀/ 2022年05月17日 09:15/ 0 赞/ 723 阅读

相关事件监听机制（四）从Java事件监听到Spring事件监听

事件监听机制（四）从Java事件监听到Spring事件监听 java 事件监听 1. 发布订阅模式 `java.util.Observable`发布者

ゝ一纸荒年。/ 2022年03月25日 10:26/ 0 赞/ 446 阅读

相关事件监听机制（一）Java事件监听

事件监听机制（一）Java事件监听事件监听实现流程 1. 事件对象：继承自`java.util.EventObject`对象，由开发者自行定义实现

小灰灰/ 2022年03月17日 15:25/ 0 赞/ 523 阅读

相关事件监听机制（二）Spring事件监听

事件监听机制（二）Spring事件监听事件监听实现流程 1. 事件对象：继承自`java.util.EventObject`对象，由开发者自行定义

小鱼儿/ 2022年03月15日 05:44/ 0 赞/ 443 阅读

相关 js中事件流、事件冒泡、事件监听、事件委托相关问题总结

1、事件流当触发某个事件时从子元素到父元素或者从父元素到子元素的触发过程成为事件流事件流有两种模式：事件冒泡从子元素向父元素触发事件捕获从

雨点打透心脏的1/2处/ 2022年01月10日 11:05/ 0 赞/ 526 阅读

相关 react 数据监听

监听组件传递的值： componentWillReceiveProps(newProps) { 参数为给组件传递的参数 }

系统管理员/ 2021年07月24日 14:23/ 0 赞/ 491 阅读