React Native - 配列マッピングされたコンポーネントのキーを取得する方法

Question

私は、この単純な 'Base'コンポーネントを作成しました（renderBoxes（）メソッドを介して）複数のBoxコンポーネントを動的に作成しました。これらのボックスコンポーネントの1つが押されると、動的に作成されたすべてのBoxコンポーネントのどれが押されたのかを知りたい。それのための方法はありますか？私たちは 'キー'を使うつもりですか？

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> 
    ); 
    } 
} 

同様の理由を記入してください。ありがとう。

Answer 1

key propは、Reactによって内部的に使用され、仮想レンダリングを最適化します。 はを使用して親に情報を戻すことができますが、おそらくそうではありません。 （実際には、DEVモードでは私はあなたがキー小道具にアクセスしようとする場合は、警告を受けると思います。）

代わりに、あなたはride変数の上に閉じ匿名関数でonPressコールバックをラップすることができます。

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

編集：

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

はその後、onBoxPressコールバックでの乗り心地を受け取ることができます

匿名関数ラッパーを使用すると、コールバック関数のコンテキストが正しくバインドされるという利点があります。あなたはラッピング機能を使用しない場合、それは手動でbindする必要があると思います：

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