日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React?createRef循環動態賦值ref問題_React

作者：acezhwang ? 更新時間： 2023-03-13 編程語言

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方法
}

總結

原文鏈接：https://blog.csdn.net/weixin_47292253/article/details/121293783

欄目分類
最近更新