下拉式子組件的React-Native引用

我正在使用react-native-dropdown，並且無法獲取listview組件中的組件引用。由於我將下拉列表添加到列表視圖行，所以我需要指定ref來選擇其中的組件，但引用返回未定義，因爲只有頂級視圖組件可以與ref一起使用。有沒有可能的解決方案。請幫忙。代碼如下：下拉式子組件的React-Native引用

在主渲染：

<ListView ref='listView' 
    style = {{ backgroundColor: '#EAEAEC'}} 
    dataSource={this.state.dataSource} 
    automaticallyAdjustContentInsets={false} 
    renderRow={this.renderRow} />

在渲染行：

<View style={{flex:2.5, justifyContent:'center', alignItems:'center'}}> 
    <Select 
     width={250} 
     ref="SELECT1" 
     optionListRef={() => {this._getOptionList()}} 
     defaultValue="Select a Province in Canada ..." 
     onSelect={ (index) => {console.log(index, 'is selected.');} }> 
     <Option>Alberta</Option> 
     <Option>British Columbia</Option> 
     <Option>Manitoba</Option> 
     <Option>Yukon</Option> 
    </Select> 
    <OptionList ref="OPTIONLIST"/> 
</View>

現在，我需要分配與裁判OPTIONLIST到optionListRef的選擇屬性OptionList標籤但由於這不是頂級視圖，因此this.refs["OPTIONLIST"]正在返回undefined。

來源

2015-12-02 Asim

我懷疑你不需要ref，而應該在輸出它們的循環中的每個子項的閉包中定義你的回調函數。如果你包括一些代碼，我可以更具體，但看到這個例子：https://facebook.github.io/react/tips/communicate-between-components.html –

@AdamTerlson我已經添加了代碼，請檢查。 – Asim

renderRow給出rowData作爲參數（https://facebook.github.io/react-native/docs/listview.html）。

在該函數中，重新定義所有內聯箭頭函數以將此rowData傳遞到常用處理程序。

例子：

renderRow(rowData) { 
    ... 
    optionListRef={() => this._getOptionList(rowData)} 
}, 

_getOptionList(rowData) { 
    // Use rowData 
}

作爲一個側面說明，除非它是多行的，你不需要在箭頭的功能花括號。

來源

2015-12-03 14:50:46

下拉式子組件的React-Native引用

回答

相關問題