Question

我正在使用react-native-dropdown，我无法在listview组件中获取组件的引用。当我将下拉列表添加到listview行时，我需要指定ref来选择其中的组件，但引用返回undefined，因为只有顶级视图组件可以与ref一起使用。有没有可能的解决方案。请帮忙。代码如下：

在主渲染中：

<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>

现在，我需要将带有ref OPTIONLIST的OptionList标记分配给select的optionListRef属性，但因为这不是顶级视图所以this.refs["OPTIONLIST"]正在返回undefined。

Answer 1

renderRow被赋予rowData作为参数（https://facebook.github.io/react-native/docs/listview.html）。

在该函数中，重新定义所有内联箭头函数，将此rowData传递给公共处理程序。

示例：

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

_getOptionList(rowData) {
   // Use rowData
}

作为旁注，除非它是多行的，否则你不需要箭头功能中的花括号。

用于下拉列表的子组件的React-Native引用

1 个答案: