React?createRef循環(huán)動(dòng)態(tài)賦值ref問題
React createRef循環(huán)動(dòng)態(tài)賦值ref
react的refs已經(jīng)是過時(shí)的API了，不適合用于循環(huán)動(dòng)態(tài)賦值ref，最近又在項(xiàng)目中遇到需要循環(huán)動(dòng)態(tài)賦值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個(gè)字符`);
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節(jié)點(diǎn)上使用，通過this.refs[refName]來引用真實(shí)的dom節(jié)點(diǎn)
<input ref="inputRef" /> //this.refs['inputRef']來訪問
回調(diào)函數(shù)
React 支持給任意組件添加特殊屬性。ref 屬性接受一個(gè)回調(diào)函數(shù)，它在組件被加載或卸載時(shí)會(huì)立即執(zhí)行。
- 當(dāng)給 HTML 元素添加 ref 屬性時(shí)，ref 回調(diào)接收了底層的 DOM 元素作為參數(shù)。
- 當(dāng)給組件添加 ref 屬性時(shí)，ref 回調(diào)接收當(dāng)前組件實(shí)例作為參數(shù)。
- 當(dāng)組件卸載的時(shí)候，會(huì)傳入null
ref 回調(diào)會(huì)在componentDidMount 或 componentDidUpdate 這些生命周期回調(diào)之前執(zhí)行。
<input ref={(input) => {this.textInput = input;}} type="text" /> ? //HTML 元素添加 ref 屬性時(shí)<CustomInput ref={(input) => {this.textInput = input;}} /> ? //組件添加 ref 屬性React.createRef()
在React 16.3版本后，使用此方法來創(chuàng)建ref。將其賦值給一個(gè)變量，通過ref掛載在dom節(jié)點(diǎn)或組件上，該ref的current屬性
將能拿到dom節(jié)點(diǎn)或組件的實(shí)例
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) 根據(jù)ref獲取dom
React提供的這個(gè)ref屬性，表示為對(duì)組件真正實(shí)例的引用，其實(shí)就是ReactDOM.render()返回的組件實(shí)例，但可以通過ReactDOM.findDOMNode(ref)來獲取組件掛載后真正的dom節(jié)點(diǎn)
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節(jié)點(diǎn)
? }
})
var Child = React.createClass({
? render: function() {
? ? return (
? ? ? ? <div ref="test">
? ? ? ? ? <a ref="update">更新</a>
? ? ? ? </div>
? ? );
? }
});(3) react-redux使用時(shí)利用ref調(diào)用子組件方法不可用報(bào)錯(cuò)
在使用react的時(shí)候，我們難免會(huì)在父組件中調(diào)用子組件的方法，我們常用ref調(diào)用子組件的方法
如下在父組件中調(diào)用子組件的寫法
父組件
handleShowModalAdd = () => {
? ? this.add.handleToggle()//handleToggle為子組件中的方法
}<SystemAdd ref={(el) => this.add = el}/>但是當(dāng)我們在子組件中使用redux的時(shí)候，由于使用connect對(duì)子組件進(jìn)行了包裝，會(huì)導(dǎo)致獲取不到子組件中的方法
下面的是使用redux后的ref使用方法
父組件
handleShowModalAdd = () => {
? ? this.add.handleToggle()//handleToggle為子組件中的方法
}<SystemAdd onRef={(ref) => this.add = ref }/>子組件
componentDidMount(){
? ? this.props.onRef(this)//將組件實(shí)例this傳遞給onRef方法
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React18?useState何時(shí)執(zhí)行更新及微任務(wù)理解
這篇文章主要為大家介紹了React18?useState何時(shí)執(zhí)行更新及微任務(wù)理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
本文主要介紹了React翻頁器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
react實(shí)現(xiàn)動(dòng)態(tài)表單
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)動(dòng)態(tài)表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
React?UI組件庫之快速實(shí)現(xiàn)antd的按需引入和自定義主題
react入門學(xué)習(xí)告一段路,下面這篇文章主要給大家介紹了關(guān)于React?UI組件庫之快速實(shí)現(xiàn)antd的按需引入和自定義主題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
使用 React 和 Threejs 創(chuàng)建一個(gè)VR全景項(xiàng)目的過程詳解
這篇文章主要介紹了使用 React 和 Threejs 創(chuàng)建一個(gè)VR全景項(xiàng)目的過程詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
使用react-router4.0實(shí)現(xiàn)重定向和404功能的方法
本篇文章主要介紹了使用react-router4.0實(shí)現(xiàn)重定向和404功能的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了React 首頁加載慢問題性能優(yōu)化案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
React循環(huán)遍歷渲染數(shù)組和對(duì)象元素方式
這篇文章主要介紹了React循環(huán)遍歷渲染數(shù)組和對(duì)象元素方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
react簡單實(shí)現(xiàn)防抖和節(jié)流
在日常開發(fā)中，我們經(jīng)常會(huì)有防抖和節(jié)流的需要，可以減小服務(wù)器端壓力，提升用戶體驗(yàn)，本文就詳細(xì)的介紹了react簡單實(shí)現(xiàn)防抖和節(jié)流，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
React中使用dnd-kit實(shí)現(xiàn)拖曳排序功能
在這篇文章中,我將帶著大家一起探究React中使用dnd-kit實(shí)現(xiàn)拖曳排序功能,由于前陣子需要在開發(fā) Picals 的時(shí)候,需要實(shí)現(xiàn)一些拖動(dòng)排序的功能,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06