精华内容
下载资源
问答
  • react添加、删除一行dom节点

    千次阅读 2020-05-10 17:50:26
    ()=>{console.log(this.state.externalContact)}) } //删除联系人 delExternalContact(index){ let lists = this.state.externalContact; lists.splice(index,1); this.setState({externalContact:lists},()=>{...

    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="gutter-col">
                         <div>
                              <Row>
                                   <Col span={5}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'name')}/></Col>
                                   <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'phone')}/></Col>
                                   <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'QQ')}/></Col>
                                   <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'email')}/></Col>
                                   <Col span={1}><div style={{width:'100%',height:'32px',lineHeight:'32px',textAlign:'center'}} onClick={()=>this.delExternalContact(i)}><DeleteFilled /></div></Col>
                              </Row>
                        </div>
                  </Col>
            </Row>
           )
        })
    }
    <Row>
         <Col offset={4} className="gutter-col"><div style={{cursor:'pointer'}} onClick={this.addExternalContact}><PlusOutlined/><span>增加对外联系人</span></div></Col>
    </Row>
    

    state里的数据

    this.state={
    	externalContact:[],//对外联系人
    	listA:[],
    }
    

    方法

    //添加对外联系人
        addExternalContact = ()=>{
            this.state.listA.push({name:'', phone:'', QQ:'', email:''})
            this.setState({
                externalContact:this.state.listA
            })
        }
        //改变对外联系人值
        changeExternalContactValue(i,value,inputName){
            //console.log(i,inputName)
            this.state.listA[i][inputName] = value
            this.setState({
                externalContact:this.state.listA
            },()=>{console.log(this.state.externalContact)})
        }
        //删除联系人
        delExternalContact(index){
            let lists = this.state.externalContact;
            lists.splice(index,1);
            this.setState({externalContact:lists},()=>{console.log(this.state.externalContact)})
        }
    
    展开全文
  • 为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput....
  • 主要给大家介绍了关于React如何将组件渲染到指定DOM节点的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习下吧。
  • React Hook可以利用useRef获取DOM节点 代码an import React, { useEffect, useRef } from 'react' function UseRef() { const btnRef = useRef(null) // 初始值 useEffect(() => { console.log(btnRef....

    React Hook可以利用useRef获取DOM节点

    代码范例:

    import React, { useEffect, useRef } from 'react'
    
    function UseRef() {
        const btnRef = useRef(null) // 初始值
    
        useEffect(() => {
          console.log(btnRef.current) // DOM 节点
        })
    
        return <div>
                <button ref = {btnRef}>click</button>
            </div>
        
    }
    
    export default UseRef

     

    展开全文
  • 最近做一个操作,点击新建公司,增加公司名称(可取消,保存),通过原生JS去增加节点,此时取消/保存按钮的this指向自身,不能去调用react方法,可以采用挂在在window上 import ReactDOM from 'react-dom'; import...

    最近做一个操作,点击新建公司,增加公司名称(可取消,保存),通过原生JS去增加节点,此时取消/保存按钮的this指向自身,不能去调用react方法,可以采用挂在在window上
    在这里插入图片描述

    import ReactDOM from 'react-dom';
    import React, { Component } from 'react';
    import { Button} from 'zent';
    
    export default class station extends React.Component{
      constructor(props){
        super(props)
        <font color='red'>**window["mystation"] = this;**</font>   挂载到window上
        this.state={
          disbtn:true,
        }
         <font color='red'> this.addItem=this.addItem.bind(this);     解决this指向</font> 
      }
     
       <font color='blue'>input输入后需要点击的保存按钮:</font> 
      saveFn(){
        console.log('保存成功');
      }
      
       <font color='blue'>点击新建按钮:</font> 
      addItem(e){
        //获取节点,追加填入的input
        if(this.state.disbtn){
          let btnName=1;
          let nextDom=e.target.nextSibling;
          let addipt=document.createElement('div');
          addipt.className="newitem";
          addipt.innerHTML=`
          <input placeholder="请输入新增公司名" />
          <p><span class="del" onClick={ window["mystation"].saveFn}>取消</span><span class="operation" onClick={this.saveFn}>编辑</span></p>
          `;
          nextDom.appendChild(addipt);
          this.setState({'disbtn':false});
          if(btnName==0){
            this.setState({'disbtn':true});
          }
          let netList=document.querySelectorAll('.newitem');
          netList.forEach((item,i)=>{
            item.className="newitem";
            netList.forEach((item2,i2)=>{
              netList[netList.length-1].className="newitem focusactive";
              netList[netList.length-1].children[0].focus();
            });
          });
        }else{
          Notify.clear()
          Notify.warn('请先输入新增的公司名');
          
        }
      }
     
    
    render(){
        return(
          <div id="station"  className="maincenter">
             <Card style={{ width:'100%' }} title="岗位列表">
            <p className="cardtable">
            <Card type="nested" title="公司" className="carditem">
            <div>
              <p className="newadd" onClick={this.addItem}>+新建公司</p>
              <div className="addList">
                <div className="newitem"><span>这是新增的公司</span>
                <p><span className="del">删除</span><span className="operation
    ">保存</span></p>
                </div>
              </div>
            </div>
        </Card>
            </p>
      </Card>
          </div>
        )
      }
    }
    

    在这里插入图片描述

    展开全文
  • React中获取DOM节点的两种方法

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

    React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。

    1、findDOMNode

    findDOMNode通常用于React组件的引用,其语法如下:

    import ReactDOM from 'react-dom';
    ReactDOM.findDOMNode(ReactComponent);
    复制代码

    当组件被渲染到DOM中后,findDOMNode会返回该组件实例对应的DOM节点。

    示例:

    componentDidMount(){
        const dom = ReactDOM.findDOMNode(this);
        // this为当前组件的实例
    }
    
    render() {}
    复制代码

    注:如果render()中返回null,那么findDOMNode()也返回null。findDOMNode只对已经挂载的组件有效。

    2、refs

    refs多用于React组件内子组件的引用。使用ref获取DOM节点有两种情况:

    (1)子组件为原生DOM组件:获取到的就是这个DOM节点。如下例,this.input就获取到了当前<input />节点。

    <input ref={(ref)=>{this.myInput = ref}} />
    复制代码

    通过this.myInput,我就可以对<input />进行一系列操作,比如让输入框聚焦:

    this.myInput.focus();
    复制代码

    注:refs也支持字符串格式:

    <input ref='myInput' />
    复制代码

    通过this.refs.myInput获取到节点。

    (2)子组件为React组件,比如<MyInput/>:获得的就是<MyInput/>的实例,因此就可以调用<MyInput/>的实例方法。
    示例:

    componentDidMount(){
        const myComp = this.refs.myComp;  // 获取到的是<Comp />的实例myComp
        const dom = ReactDOM.findDOMNode(myComp);  // 获取到实例对应的DOM节点
    }
    
    render(){
        return (
            <div>
                <Comp ref='myComp' />
            </div>
        );
    }
    复制代码

    注:调用<Comp />实例方法的方式:this.refs.myComp.method(),但并不建议这种调用方式。


    展开全文
  • React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。 1、findDOMNode ...当组件被渲染到DOM中后,findDOMNode会返回该组件实例对应的DOM节点。 示例: componentDidMount()..
  • React中,组件并不是真实的DOM节点,而是一种存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上...
  • import ReactDom from 'react-dom' 添加节点: ReactDom.render(ReactNode,挂载的dom对象) 将内容添加到dom对象内 卸载节点: let state=ReactDom.unmountComponentAtNode(挂载的dom对象) 返回是否删除成功bool...
  • React中获取真实DOM节点的几种方法

    千次阅读 2018-12-16 16:12:15
    在使用React编写代码时,难免会遇到需要获取到真实DOM节点的时候,那么在React中我们怎么去获取呢?以下总结了几种方法: 1. 通过在标签中添加ref属性(react官方已弃用) class Index extends Component {  ...
  • 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() ...
  • React获取DOM节点

    2018-11-16 14:03:05
    React获取DOM节点
  • 从开始接触React至今已有两年的时间,但是对我而言,仍然有些雾里看花的感觉:我们为... Virtual DOM(虚拟DOM)Basic renderdiff 算法setState更新机制 为了在浏览器中使用react,我们需要引用两种类库:React和Re...
  • react插入DOM元素

    2020-12-16 11:09:21
    DOM元素中渲染html dangerouslySetInnerHTML={{__html: “html字符串”}} let htmlStr = "<li> <div class="sample-origin-tips"> <div class="tips-line"></div> <p class="tips-text"&...
  • 前言这系列是 React 基础教程(参考 React 官网),记录了自己入门学习 React 的笔记。不太适合有 React 丰富经验的同学,但希望看到此文的你,多少都有些收获。文章代码均可在我的码云中找到:...
  • 通过ref进行name绑定,通过创建变量使用useRef,通过name.curren进行取值
  • react 官方给我提供了一个 ref 把想要获取的div的dom绑定上 ref{this.name} this.名字是自己取得。下面是代码: import React from 'react' export default class form_input extends React.Component{ ...
  • react native获取到真实的DOM节点

    千次阅读 2018-12-28 15:35:25
    this.state:开发中,组件肯定要与用户进行交互,React的一大创新就是将组件看成了一个状态机,一开始有一个初始状态,然后用户交互,导致状态变化,从而触发重新渲染页面 1、当用户点击组件,导致状态变化,this....
  • 通过DOM节点获取React组件数据 从组件本身内部检索React组件的DOM节点是相当简单的,但是如果您想向后工作怎么办:按DOM节点检索组件的实例呢? 这是旧的Dojo Toolkit的Dijit框架使用dijit.byId方法所允许的dijit...
  • React获取DOM方法

    万次阅读 2017-08-31 16:19:34
    以下提供三种方法: import React, { Component } from 'react...import ReactDOM from 'react-dom'; class Index extends Component { onClick(event){ console.log(event.target.value); // 第一种方式 var subm
  • React 获取真实的DOM节点

    千次阅读 2017-02-19 10:16:16
    获取真实的DOM节点 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。 有时需要从组件获取真实 DOM 的节点,这时...
  • 《从零玩转React全家桶核心(21)》正在更新,视频版请登录官网(www.it666.com)查看,或者扫码直达:Diff算法开发中我们知道,数据的更新:例如DOM节点、组件属性的增加、删除、修改等引起界面的变化。在React中,每次...
  • 一、通过内敛样式函数的方式获取dom。此种方式在每次更新数据的时候都需要先将c元素置为null,所以需要 渲染两次。但是不会影响页面的展示。 class Demo extends React.Component { showInfo = () => { ...
  • 获取真实的DOM节点: 1.组建并不是真实的DOM节点,只是虚拟DOM; 2.虚拟DOM拿不到输入框中用户输入的数据,所以要使用ref属性来获取真实的DOM节点,this.refs[refName]用来获取真实的DOM节点; 3.必须等到...
  • react组件dom添加样式

    2020-12-16 14:54:00
    react组件dom添加样式 行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现: // 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red',...
  • react获取dom元素React is great at abstracting away the DOM from you when building apps. 在构建应用程序时,React擅长从您那里提取DOM。 But what if you want to access the DOM element that a React ...
  • React 获取虚拟dom节点的两种方法

    千次阅读 2016-11-18 16:08:29
    第一种常规做法: &lt;div className="confirm-money" ref="totalNeedPayRef"&gt;...import React from 'react';...import { findDOMNode } from 'react-dom'; const { totalNeedPa...
  • 在上一篇博客React虚拟DOM原理中,我们探索了如何创建虚拟DOM,那么创建了虚拟DOM之后,又是怎么转换成真实DOM,渲染在页面中的呢,下面我们继续探索。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,949
精华内容 9,579
关键字:

react删除dom节点