React createRef循环动态赋值ref问题

 更新时间:2023年01月16日 14:11:01   作者:acezhwang  
这篇文章主要介绍了React createRef循环动态赋值ref问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

React createRef循环动态赋值ref

react的refs已经是过时的API了,不适合用于循环动态赋值ref,最近又在项目中遇到需要循环动态赋值ref,这是用createRef的方法,在此记录一下,亲测有效!

handleChange = (key) => {
    this[`input${key}Ref`] = React.createRef();
}
 
handleSave = () => {
    const { list } = this.state;
    for (let item of list) {
        if (item.value && item.value.length > 100) {
          Toast.show(`${item.name}不能超过100个字符`);
          this[`input${item.key}Ref`].current&&this[`input${item.key}Ref`].current.focus();
          return;
        }
    }
    // 写接口等其他逻辑
 }
 
render() {
    const { list } = this.state;
    <div>
        {
            list.map(item=>{
              <Input
                  ref={this[`input${item.key}Ref`]}
                  value={item.value}
                  onChange={() => { this.handleChange(item.key) }}
              />
            })
        }
        <Button type="primary" onClick={this.handleSave}>保存</Button>
     </div>
}

React中ref的理解

(1) React的ref有3种用法

字符串

dom节点上使用,通过this.refs[refName]来引用真实的dom节点

<input ref="inputRef" /> //this.refs['inputRef']来访问

回调函数

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数,它在组件被加载或卸载时会立即执行。

  • 当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。
  • 当给组件添加 ref 属性时,ref 回调接收当前组件实例作为参数。
  • 当组件卸载的时候,会传入null

ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。

<input ref={(input) => {this.textInput = input;}} type="text" />   //HTML 元素添加 ref 属性时
<CustomInput ref={(input) => {this.textInput = input;}} />   //组件添加 ref 属性

React.createRef()

在React 16.3版本后,使用此方法来创建ref。将其赋值给一个变量,通过ref挂载在dom节点或组件上,该ref的current属性

将能拿到dom节点或组件的实例

class Child extends React.Component{
    constructor(props){
        super(props);
        this.myRef=React.createRef();
    }
    componentDidMount(){
        console.log(this.myRef.current);
    }
    render(){
        return <input ref={this.myRef}/>
    }
}

(2) 根据ref获取dom

React提供的这个ref属性,表示为对组件真正实例的引用,其实就是ReactDOM.render()返回的组件实例,但可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点

var Parent = React.createClass({
  render: function(){
    return (
      <div className = 'parent'>
        <Child ref = 'child'/>
      </div>
    )
  },
  componentDidMount(){
    console.log(this.refs.child); // 访问挂载在组件上ref
    console.log(ReactDOM.findDOMNode(this.refs.child)); // 访问真正的dom节点
  }
})

var Child = React.createClass({
  render: function() {
    return (
        <div ref="test">
          <a ref="update">更新</a>
        </div>
    );
  }
});

(3) react-redux使用时利用ref调用子组件方法不可用报错

在使用react的时候,我们难免会在父组件中调用子组件的方法,我们常用ref调用子组件的方法

如下在父组件中调用子组件的写法

父组件

handleShowModalAdd = () => {
    this.add.handleToggle()//handleToggle为子组件中的方法
}
<SystemAdd ref={(el) => this.add = el}/>

但是当我们在子组件中使用redux的时候,由于使用connect对子组件进行了包装,会导致获取不到子组件中的方法

下面的是使用redux后的ref使用方法

父组件

handleShowModalAdd = () => {
    this.add.handleToggle()//handleToggle为子组件中的方法
}
<SystemAdd onRef={(ref) => this.add = ref }/>

子组件

componentDidMount(){
    this.props.onRef(this)//将组件实例this传递给onRef方法
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React使用highlight.js Clipboard.js实现代码高亮复制

    React使用highlight.js Clipboard.js实现代码高亮复制

    这篇文章主要为大家介绍了React使用highlight.js Clipboard.js实现代码高亮复制功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Jira 任务管理系统项目总结讲解

    Jira 任务管理系统项目总结讲解

    这篇文章主要为大家介绍了Jira 任务管理系统项目总结讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • react.js 获取真实的DOM节点实例(必看)

    react.js 获取真实的DOM节点实例(必看)

    下面小编就为大家带来一篇react.js 获取真实的DOM节点实例(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • React的diff算法核心复用图文详解

    React的diff算法核心复用图文详解

    这篇文章主要为大家介绍了React的diff算法核心复用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • React中映射一个嵌套数组实现demo

    React中映射一个嵌套数组实现demo

    这篇文章主要为大家介绍了React中映射一个嵌套数组实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React Router6.x路由表封装的两种写法

    React Router6.x路由表封装的两种写法

    本文主要介绍了React Router6.x路由表封装的两种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • react-redux中connect()方法详细解析

    react-redux中connect()方法详细解析

    connect()是React-redux中的核心方法之一,它将react组件预redux中的Store真正连接在一起,下面这篇文章主要给大家介绍了react-redux中connect()方法的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • React组件传参方式你了解吗

    React组件传参方式你了解吗

    众所周知 ,在业务开发中,无论用的什么框架,首先要熟悉项目搭建,路由配置和组件通信,所以我们今天要探究的就是React中组件通信的几种方式,快跟随小编一起学习起来吧
    2024-03-03
  • 重新理解 React useRef原理

    重新理解 React useRef原理

    这篇文章主要为大家介绍了React useRef原理的深入理解分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • React Native 混合开发多入口加载方式详解

    React Native 混合开发多入口加载方式详解

    这篇文章主要介绍了React Native 混合开发多入口加载方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论