dom节点变化事件 react - CSDN
  • 4、React对组件的DOM事件监听

    千次阅读 2016-01-17 16:42:13
    下面的代码展示了在React中如何对按钮的点击事件和输入框的输入事件做监听: State var HelloWorld = React.createClass({ handleClick: function() { alert('you click me!'); }, ...

    下面的代码展示了在React中如何对按钮的点击事件和输入框的输入事件做监听:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>State</title>
    	<script type="text/javascript" src="../react-0.13.0/build/react.js"></script>
    	<script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script>
    </head>
    <body>
    	<div id="container"></div>
    	<script type="text/jsx">
    		var HelloWorld = React.createClass({
    			handleClick: function() {
    				alert('you click me!');
    			},
    			handleChange: function(event){
    				//通过React.findDOMNode()拿到真实的DOM对象
    				var node = React.findDOMNode(this.refs.inputContent);
    				node.innerHTML = event.target.value;
    			},
    			render: function() {
    				return (
    					<div>
    						<button onClick={this.handleClick}>Hello</button>
    						<br/>
    						<input type="text" onChange={this.handleChange} />
    						<span ref="inputContent"></span>
    					</div>
    				);
    			}
    		});
    		React.render(
    			<HelloWorld />,
    			document.getElementById('container')
    		);
    	</script>
    </body>
    </html>
    浏览器中执行结果如下:



    点击按钮后,会弹出提示框,在输入框中输入文本后,输入框后面会动态显示出输入的文本。

    下面解释以上代码:

    在组件的render函数中,创建了一个<button>标签,JSX添加事件监听函数,都是以驼峰命名法,跟html中onclick不同的是,JSX中写作onClick,然后指定处理函数为{this.handleClick},同理,html中的onchange在JSX中写作onChange,后面指定的处理函数为{this.handleChange},在input标签后面,还有一个<span>标签,我们为该标签设置了一个ref属性,该属性是JSX中的属性,在组件中,可以通过this.refs.属性值来获取某个虚拟的dom节点,然后用React.findDOMNode()可以获取真实的DOM节点。

    展开全文
  • 一、表单事件 1.监听表单的改变事件 onChange 2.在改变的事件里面获取表单输入的值 事件对象 3.把表单输入的值赋值给username this.setState({}) 4.点击按钮的时候 获取state里面的username的值 this.state....
        

    一、表单事件

    1.监听表单的改变事件 onChange
    2.在改变的事件里面获取表单输入的值 事件对象
    3.把表单输入的值赋值给username this.setState({})
    4.点击按钮的时候 获取state里面的username的值 this.state.username

    <input type="text" onChange={this.inputChange}/><button onClick={this.getInput}>获取input的值</button>
    
    • 获取表单的值
     inputChange=(e)=>{
            // console.log('111');
            // 获取表单的值
            // console.log(e.target.value);
            this.setState({
                username:e.target.value
            }) 
        }
        getInput=()=>{
            alert(this.state.username)
        }
    
    • 效果展示


      7861972-43eeed531065962e.png
      效果展示

    二、ref获取dom节点

    • 1.给元素定义ref属性
    <input ref="username" type="text" onChange={this.inputChange}/><button onClick={this.getInput}>获取input的值</button>
    
    • 2.通过this.refs.username 获取dom节点
      inputChange=()=>{
            let val = this.refs.username.value
            this.setState({
                username:val
            })
        }
        getInput=()=>{
            alert(this.state.username)
        }
    

    三、键盘事件

    • 键盘事件
    <input type="text" onKeyUp={this.inputKeyup}/>
    
    • 键盘事件执行方法
    inputKeyup=(e)=>{
            // console.log(e.keyCode)
            if(e.keyCode == 13){
                alert(e.target.value)
            }    
        }
    

    四、类似VUE数据绑定

    • model改变影响view view改变影响model
    <input value={this.state.username} onChange={this.inputChange}/>
     <p>{this.state.username}</p>
     <button onClick={this.setUsername}>改变username的值</button>
    
    • 方法
    inputChange=(e)=>{
            this.setState({
                username:e.target.value
            })
        }
        setUsername=()=>{
            this.setState({
                username:'大古'
            })
        }
    
    • 效果展示


      7861972-e250201290cbab3c.png
      改变前

      7861972-11823afa6f8a7565.png
      改变后

      好了,今天的分享就到这里了!
      愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。


      7861972-c15692bc3ce6fc3a.jpg
      小晴天
    展开全文
  • 思想在react的世界里,都是状态变更(数据变更)来驱动dom变化,动态添加dom不像以前用jquery一样append一个或者一个<td> 这样了,而是通过装载<li> 或者<td> 数据数组[]来动态添加dom,下面的例子实现使用了antd的...

    思想

    在react的世界里,都是状态变更(数据变更)来驱动dom变化,动态添加dom不像以前用jquery一样append一个<li>或者一个<td> 这样了,而是通过装载<li> 或者<td> 数据数组[]来动态添加dom,下面的例子实现使用了antd的组件库
    参考:https://ant.design/components/form-cn/#components-form-demo-dynamic-form-item

    实例

    这里写图片描述

    实现

    1.引用

    import React, { Component, PropTypes } from 'react';
    import { Form, Input, Radio, Row, Col, Upload, Icon, Button, message, Select, DatePicker,Modal} from 'antd';

    2.初始化

    constructor(props) {
          super(props);
           this.state = {
               hover: [],
           };
    }

    3.内容组件
    内容组件其实是一个<ul><li> ,遍历了一个<li>的数组articleContent,CSS样式见最后

    render(){
    
    const liClass = this.state.hover[index] ? "rectanglesON " : "rectanglesOFF ";
    const formItems = this.state.articleData.articleContent.map((k, index) => {
    return (
    <li key={index} ref={"li_" + index} datatype={k.contentType} className={liClass} onMouseEnter={this.handleMouseEnter.bind(this,index)} onMouseLeave{this.handleMouseLeave.bind(this,index)} 
    onClick={this.handleClickByModule.bind(this,index,k.contentType)}>
        //业务需要显示的东西
        <div>li标签里要显示的东西</div>
        //悬停时右下角的按钮
        <div className={this.state.hover[index]?'actionShow':'actionHide'}>
            <div className={(index > 0)?'domShow':'domHide'}>
                <Button type="primary" size="small" className="mr-5" onClick={this.handleClickBySortUp.bind(this,index)}><Icon type="caret-up" />上移</Button>
            </div>
            <div className={(index < this.state.articleData.articleContent.length - 1)?'domShow':'domHide'}>
                <Button type="primary" size="small" className="mr-5" onClick={this.handleClickBySortDown.bind(this,index)}><Icon type="caret-down" />下移</Button>
            </div>
            <div>
                <Button type="primary" size="small" className="mr-5" onClick={this.handleClickByDelete.bind(this,index)}><Icon type="delete" />删除</Button>
            </div>
        </div>
    </li>
    )
    });
    
    //ul
    return (
        <FormItem label="内容">
            <ul className='listContent'>
                {formItems}
            </ul>
        </FormItem>
        )
    }

    4.事件

    //鼠标移到内容模块上时触发的事件
        handleMouseEnter(key) {
            let arg = this.state.hover;
            arg[key] = true;
            this.setState({
                hover: arg
            });
        }
    
        //鼠标离开内容模块时触发的事件
        handleMouseLeave(key) {
            let arg = this.state.hover;
            arg[key] = false;
            this.setState({
                hover: arg
            });
        }
        //点击向上排序按钮事件
        handleClickBySortUp(index, e) {
            e.stopPropagation();
            let arr = this.state.articleData.articleContent;
            if (index != 0) {
                let temp = arr[index - 1];
                arr[index - 1] = arr[index];
                arr[index] = temp;
                this.setState({
                    articleData: this.state.articleData,
                });
            }
        }
    
        //点击向下排序按钮事件
        handleClickBySortDown(index, e) {
            e.stopPropagation();
            let arr = this.state.articleData.articleContent;
            if (index != arr.length) {
                let temp = arr[index + 1];
                arr[index + 1] = arr[index];
                arr[index] = temp;
                this.setState({
                    articleData: this.state.articleData,
                });
            }
        }
    
        //点击删除按钮事件
        handleClickByDelete(index, e) {
            e.stopPropagation();
            let arr = this.state.articleData.articleContent;
            arr.splice(index, 1);
            this.setState({
                articleData: this.state.articleData,
            });
        }
    

    5.CSS样式

    .rectanglesON {
        word-wrap: break-word;
        min-height: 200px;
        border: 1px dashed #808080;
        list-style-type: none;
        margin-bottom: 10px;
        cursor: pointer;
    }
    
    .rectanglesOFF {
        word-wrap: break-word;
        min-height: 200px;
        border: 1px dashed #d3d3d3;
        list-style-type: none;
        margin-bottom: 10px;
    }
    
    .listContent li {
        position: relative;
        .actionShow {
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 10px;
            display: flex;
        }
        .actionHide {
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 10px;
            display: none;
        }
    }
    
    .mr-5{
        margin-right:5px;
    }
    展开全文
  • <div className="selection" style={item.select == true?{backgroundColor:'rgba(0,230,155,.8)'}:{backgroundColor:'rgba(0,255,172,....这里我们有一个点击事件,让这个div变色。 const [reportChange,setrepor.
     <div className="selection" style={item.select == true?{backgroundColor:'rgba(0,230,155,.8)'}:{backgroundColor:'rgba(0,255,172,.1)'}}  onClick={()=>selectReport(index,item.name)}></div>
    

    这里我们有一个点击事件,让这个div变色。

        const [reportChange,setreportChange] = useState([
            {
                name:"水文水资源",
                img:'',
                select:false
                
            },
            {
                 name:"水源地水质",
                 img:'',
                 select:false
             },
             {
                 name:"畜禽养殖",
                 img:'',
                 select:false
             },
             {
                 name:"污水处理",
                 img:'',
                 select:false
             },
    
        ])
            const selectReport = (index,sele)=>{
            let array = [...reportChange];
            array[index].select = !array[index].select
            setreportChange(array)
            // console.log(reportChange,sele)
    
        }
    

    这里的变色我们是根据遍历的reportChange数据进行变化
    我们将array对数组进行解构,然后完成点击变化事件后,再将array重新赋值给reportChange

    展开全文
  • React获取DOM节点

    2018-11-16 14:03:05
    React获取DOM节点
  • React 获取真实的DOM节点

    千次阅读 2017-02-19 10:16:18
    获取真实的DOM节点 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。 有时需要从组件获取真实 DOM 的节点,这时...
  • React中获取真实DOM节点的几种方法

    千次阅读 2018-12-20 21:28:18
    在使用React编写代码时,难免会遇到需要获取到真实DOM节点的时候,那么在React中我们怎么去获取呢?以下总结了几种方法: 1. 通过在标签中添加ref属性(react官方已弃用) class Index extends Component {  ...
  • React中,组件并不是真实的DOM节点,而是一种存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上...
  • React中获取DOM节点的两种方法

    千次阅读 2020-01-06 12:50:15
    React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。 1、findDOMNode findDOMNode通常用于React组件的引用,其语法如下: import ReactDOM from 'react-dom'; ReactDOM.findDOMNode...
  • react教程之获取真实的DOM节点

    千次阅读 2016-11-30 19:02:55
    获取真实的DOM节点 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在...
  • DOM变动事件用法
  • 通过DOM节点获取React组件数据 从组件本身内部检索React组件的DOM节点是相当简单的,但是如果您想向后工作怎么办:按DOM节点检索组件的实例呢? 这是旧的Dojo Toolkit的Dijit框架使用dijit.byId方法所允许的dijit...
  • React 事件Dom 事件

    2019-06-11 12:05:50
    注意:Chrome 中打印的对象...React 事件dom 事件 两者很像,只是有一些语法上的不一样。 事件名 jsx 中采用驼峰命名。 参数是一个事件处理函数 原生的 dom 事件 click 事件和 href 的优先级: click >>&...
  • react native获取到真实的DOM节点

    千次阅读 2018-12-28 15:35:25
    this.state:开发中,组件肯定要与用户进行交互,React的一大创新就是将组件看成了一个状态机,一开始有一个初始状态,然后用户交互,导致状态变化,从而触发重新渲染页面 1、当用户点击组件,导致状态变化,this....
  • ReactNative中获取真实的DOM节点

    千次阅读 2018-01-06 18:05:02
    获取真实的DOM节点ReactNative中,可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值,根据diff算法算出来有差以后,就会执行ReactDom的render方法,重新渲染页面 ...
  • React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。 1、findDOMNode ...当组件被渲染到DOM中后,findDOMNode会返回该组件实例对应的DOM节点。 示例: componentDidMount()..
  • render里面的布局 { this.state.externalContact.map((item,i)=>{ //console.log("i==="+i+"item"+item) return( <Row className="gutter-row" key={i}> <Col span={20} offset={4} className=...
  • react虚拟DOM的机制

    万次阅读 2019-08-04 10:37:51
    基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的...
  • React 获取虚拟dom节点的两种方法

    千次阅读 2016-11-18 16:08:44
    第一种常规做法: &lt;div className="confirm-money" ref="totalNeedPayRef"&gt;...import React from 'react';...import { findDOMNode } from 'react-dom'; const { totalNeedPa...
  • React获取底层DOM节点ref属性

    千次阅读 2018-10-26 14:12:32
    React中,有时需要访问底层DOM节点来执行一些命令式操作。 class Focus extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) } handleClick() ...
1 2 3 4 5 ... 20
收藏数 16,898
精华内容 6,759
热门标签
关键字:

dom节点变化事件 react