react-native-modal-selector的getSelectedItem方法无法获取选中项求助

你遇到的核心问题是混淆了getSelectedItem的用法：它是组件的实例方法，并不是可以直接传入的回调props。你现在把它当成props传递给ModalSelector，自然不会触发任何响应。

下面给你两种可行的解决方案：

方案一：使用官方推荐的onChange回调（优先选择） #

组件提供了onChange props来监听选项选择事件，当用户选中某个选项时会自动触发，直接返回选中的item。只需要把你代码里的getSelectedItem替换成onChange即可：

<ModalSelector
  selectStyle={{ borderWidth: 0 }}
  selectTextStyle={{ color: '#ffffff' }}
  data={this.filterData()}
  visible={this.state.visible}
  optionTextStyle={{ fontSize: 20 }}
  labelExtractor={(item) => item.categoryName}
  initValue="Choose Category"
  supportedOrientations={[ 'landscape' ]}
  accessible={true}
  onChange={(item)=> console.log(item)} // 替换为onChange回调
  keyExtractor={(item) => item.categoryId}
  closeOnChange={false}
  backdropPressToClose={true}
/>

即使你设置了closeOnChange={false}（选中后不关闭模态框），onChange依然会正常触发，完全不影响获取选中项。

方案二：通过ref调用getSelectedItem实例方法 #

如果你确实需要手动获取当前选中项（比如在某个按钮点击时主动获取），可以通过给组件绑定ref来调用getSelectedItem方法：

// 第一步：在组件中创建ref
constructor(props) {
  super(props);
  this.modalSelectorRef = React.createRef();
}

// 第二步：创建一个方法来主动获取选中项
getCurrentSelected = () => {
  const selectedItem = this.modalSelectorRef.current?.getSelectedItem();
  console.log('当前选中项：', selectedItem);
}

// 第三步：渲染组件时绑定ref
<ModalSelector
  ref={this.modalSelectorRef}
  selectStyle={{ borderWidth: 0 }}
  selectTextStyle={{ color: '#ffffff' }}
  data={this.filterData()}
  visible={this.state.visible}
  optionTextStyle={{ fontSize: 20 }}
  labelExtractor={(item) => item.categoryName}
  initValue="Choose Category"
  supportedOrientations={[ 'landscape' ]}
  accessible={true}
  keyExtractor={(item) => item.categoryId}
  closeOnChange={false}
  backdropPressToClose={true}
/>

// 比如在某个按钮点击时调用
<Button title="获取选中项" onPress={this.getCurrentSelected} />

这样就能通过ref主动获取到当前的选中项了。

内容的提问来源于stack exchange，提问作者sourav