React Native如何实现模态框单选按钮值向父组件传递

核心实现逻辑：父组件向子组件传入支持接收参数的回调函数，子组件点击OK确认时，将内部维护的选中状态作为参数传入回调，父组件即可获取到对应数据。 #

修改子组件 Sortby.js #

你当前OK按钮直接绑定了父组件传入的onOK方法，没有携带内部状态参数，只需要修改按钮的onPress触发逻辑，在回调中传入state存储的两个选中值即可。
找到OK按钮的代码段，替换为以下内容：

<View style={styles.button}>
  <Button 
    title="OK" 
    color={"#5d86d7"}  
    onPress={() => {
      // 传入当前选中的列表索引、单选按钮取值
      this.props.onOK(this.state.selectedIndex, this.state.radioButtonValue)
    }}
  />         
</View>

修改父组件 App.js #

父组件的onOK回调方法需要接收子组件传回的参数，你可以将参数存入自身state用于后续排序业务逻辑，同时关闭模态框。

1. 首先在父组件state中新增字段存储排序参数：

state = {    
  showSortby: false,
  // 新增：存储选中的排序字段索引、排序方向
  selectedFieldIndex: 0,
  sortDirection: 'asc'
};

2. 替换原有的getSortValues方法，实现参数接收与存储：

getSortValues = (index, direction) => {
  this.setState({
    selectedFieldIndex: index,
    sortDirection: direction,
    showSortby: false // 关闭模态框
  }, () => {
    // 此处可编写拿到参数后的业务逻辑，比如触发列表排序、打印验证等
    console.log('选中排序项索引：', this.state.selectedFieldIndex)
    console.log('排序方向：', this.state.sortDirection)
  })
}

说明 #

修改完成后，点击模态框OK按钮时，父组件即可准确获取到当前选中的列表项索引（对应你传入的gridFieldArray数组中的字段项）、排序方向（asc/desc），直接用于后续业务逻辑即可。
你当前单选按钮的选中状态判断逻辑是正常的，同一时间只会显示一个选中的单选按钮，不需要额外调整。 #

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