React Native - 如何獲得陣列映射組件的密鑰

我創建了這個簡單的'Base'組件，它可以動態創建多個'Box'組件（通過renderBoxes（）方法）。當按下其中一個框組件時，我想知道所有動態創建的Box組件中的哪一個被按下。有沒有辦法呢？我們要使用'鑰匙'嗎？React Native - 如何獲得陣列映射組件的密鑰

import data from './dataFile.json'; 

class Base extends Component { 

    state = {calendarData: []}; 

    componentWillMount() { 
    //storing json data in the state 
    this.setState({ calendarData: data }); 
    } 

    onBoxPress() { 

    // HOW TO ACCESS WHICH BOX COMPONENT WAS PRESSED? 

    } 

    renderBoxes() { 
    return this.state.calenderData.map(ride => { 
     <Box 
     key={ride.id} 
     onPress={this.onBoxPress}> 
     </Box> 
    }); 
    } 

    render() { 
    return(
     <View> 
     { this.renderBoxes() } 
     </View> 
    ); 
    } 
}

請提供一個簡短的理由。謝謝。

來源

2017-09-03 prasang7

key prop由React在內部用於優化虛擬渲染。儘管可能會使用將信息傳回給父母，但它可能不應該。（事實上，在開發模式我認爲，如果你嘗試訪問的關鍵道具，你會得到一個警告。）

相反，你可以包裝onPress回調封閉在ride變量的匿名函數：

<Box 
    key={ride.id} 
    onPress={() => this.onBoxPress(ride)}> 
    </Box>

然後，您可以收到在onBoxPress回調搭：

onBoxPress(ride) { 
    // do something with the ride 
}

編輯：

使用匿名函數包裝器具有額外的好處，它正確地綁定回調函數的this上下文。如果你不使用的包裝功能，你必須手動到bind它：

<Box onPress={this.onBoxPress.bind(this)}></Box>

此外，要自動綁定this背景下，您可以改用類屬性語法：

onBoxPress =() => { 
    // `this` is now bound correctly 
    this.setState(...) 
}

來源

2017-09-03 16:54:14 jevakallio

有效。我明白了你的觀點。謝謝。 – prasang7

太棒了！不要忘記將問題標記爲已回答，所以其他尋求未解答的問題需要幫助的人可以看到這個問題已經解決。 – jevakallio

啊，'this.setState'問題是由於'this'變量未被正確綁定。編輯答案包括本說明。 – jevakallio

React Native - 如何獲得陣列映射組件的密鑰

回答

相關問題