React?createRef循環(huán)動態(tài)賦值ref問題
React createRef循環(huán)動態(tài)賦值ref
react的refs已經(jīng)是過時的API了，不適合用于循環(huán)動態(tài)賦值ref，最近又在項目中遇到需要循環(huán)動態(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個字符`);
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é)點上使用，通過this.refs[refName]來引用真實的dom節(jié)點
<input ref="inputRef" /> //this.refs['inputRef']來訪問
回調(diào)函數(shù)
React 支持給任意組件添加特殊屬性。ref 屬性接受一個回調(diào)函數(shù)，它在組件被加載或卸載時會立即執(zhí)行。
- 當(dāng)給 HTML 元素添加 ref 屬性時，ref 回調(diào)接收了底層的 DOM 元素作為參數(shù)。
- 當(dāng)給組件添加 ref 屬性時，ref 回調(diào)接收當(dāng)前組件實例作為參數(shù)。
- 當(dāng)組件卸載的時候，會傳入null
ref 回調(diào)會在componentDidMount 或 componentDidUpdate 這些生命周期回調(diào)之前執(zhí)行。
<input ref={(input) => {this.textInput = input;}} type="text" /> ? //HTML 元素添加 ref 屬性時<CustomInput ref={(input) => {this.textInput = input;}} /> ? //組件添加 ref 屬性React.createRef()
在React 16.3版本后，使用此方法來創(chuàng)建ref。將其賦值給一個變量，通過ref掛載在dom節(jié)點或組件上，該ref的current屬性
將能拿到dom節(jié)點或組件的實例
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提供的這個ref屬性，表示為對組件真正實例的引用，其實就是ReactDOM.render()返回的組件實例，但可以通過ReactDOM.findDOMNode(ref)來獲取組件掛載后真正的dom節(jié)點
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é)點
? }
})
var Child = React.createClass({
? render: function() {
? ? return (
? ? ? ? <div ref="test">
? ? ? ? ? <a ref="update">更新</a>
? ? ? ? </div>
? ? );
? }
});(3) react-redux使用時利用ref調(diào)用子組件方法不可用報錯
在使用react的時候，我們難免會在父組件中調(diào)用子組件的方法，我們常用ref調(diào)用子組件的方法
如下在父組件中調(diào)用子組件的寫法
父組件
handleShowModalAdd = () => {
? ? this.add.handleToggle()//handleToggle為子組件中的方法
}<SystemAdd ref={(el) => this.add = el}/>但是當(dāng)我們在子組件中使用redux的時候，由于使用connect對子組件進(jìn)行了包裝，會導(dǎo)致獲取不到子組件中的方法
下面的是使用redux后的ref使用方法
父組件
handleShowModalAdd = () => {
? ? this.add.handleToggle()//handleToggle為子組件中的方法
}<SystemAdd onRef={(ref) => this.add = ref }/>子組件
componentDidMount(){
? ? this.props.onRef(this)//將組件實例this傳遞給onRef方法
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React使用highlight.js Clipboard.js實現(xiàn)代碼高亮復(fù)制
這篇文章主要為大家介紹了React使用highlight.js Clipboard.js實現(xiàn)代碼高亮復(fù)制功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Jira 任務(wù)管理系統(tǒng)項目總結(jié)講解
這篇文章主要為大家介紹了Jira 任務(wù)管理系統(tǒng)項目總結(jié)講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
react.js 獲取真實的DOM節(jié)點實例(必看)
下面小編就為大家?guī)硪黄猺eact.js 獲取真實的DOM節(jié)點實例(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家介紹了React的diff算法核心復(fù)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
React中映射一個嵌套數(shù)組實現(xiàn)demo
這篇文章主要為大家介紹了React中映射一個嵌套數(shù)組實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本文主要介紹了React Router6.x路由表封裝的兩種寫法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
react-redux中connect()方法詳細(xì)解析
connect()是React-redux中的核心方法之一，它將react組件預(yù)redux中的Store真正連接在一起，下面這篇文章主要給大家介紹了react-redux中connect()方法的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
眾所周知?,在業(yè)務(wù)開發(fā)中,無論用的什么框架,首先要熟悉項目搭建,路由配置和組件通信,所以我們今天要探究的就是React中組件通信的幾種方式,快跟隨小編一起學(xué)習(xí)起來吧2024-03-03
這篇文章主要為大家介紹了React?useRef原理的深入理解分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React Native 混合開發(fā)多入口加載方式詳解
這篇文章主要介紹了React Native 混合開發(fā)多入口加載方式詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09