React createRef循环动态赋值ref问题

acezhwang 2023-02-03 我要评论

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 createRef循环动态赋值ref问题