Question

我正在使用React Native应用程序，在我的一个视图中，我有一个FlatList：当我单击该列表中的某个项目时，将显示一个“弹出”视图，其中包含有关该单击项的详细信息。我选择不使用Modal实现此目的（这可能是一个好选择，也可能不是一个好选择），因为我以后想在我的应用程序的其他位置重用此“弹出”视图，因此我决定将其创建为一个单独的类。 / p>

问题是我的“弹出”视图（ItemDetail）中有一个“关闭”按钮，当我单击“关闭”按钮时，我希望父组件（已返回弹出视图的组件）获取有关以下内容的信息：单击子项ItemDetail的按钮，以关闭视图。我尝试使用ref来实现这一点，但是似乎无法实现：打开弹出视图时，单击“关闭”按钮没有任何作用，并且当我在{开头的时候键入console.log(this.refs)作为父项的渲染功能，控制台始终显示Object {}。

这是我的代码的简化版本，仅包含有问题的功能。

父组件类：

export default class Search extends React.Component {
state = {
        clickedItem: undefined,
    }

_displayItemDetail() {
   if (this.state.clickedItem != undefined){
        if (this.itemdetail.closeWasClicked()){ // call the child's component function using ref
            this.setState({clickedItem: undefined})
       } else {
            return(
                <View style = {styles.popupContainer} >
                    <TouchableHighlight
                        style = {styles.popupBackground}
                        activeOpacity = {0}
                        onPress = {() => {this.setState({clickedItem: undefined})}}>
                <View/>
                    </TouchableHighlight>
                    <View style = {styles.itemPopup}>
                         // Here is where my ref is defined
                        <ItemDetail ref={(ref) => {this.itemdetail = ref}} item = {this.state.clickeditem}/>
                    </View>
                </View>
            )
        }        
    }   
}


 render() {
    console.log(this.itemdetail)
    return(
        <View style = {styles.main_view}>
            <FlatList
                ItemSeparatorComponent = {() => <View style = {styles.separator} />}
                keyExtractor={(item) => item.id.toString()}
                data={this.state.items}
                renderItem={({item}) => this._renderItem(item)} />
                {this._displayItemDetail()}
        </View>
        );
    }
}
}

子组件（弹出视图）类：

export default class ItemDetail extends React.Component {
state = {
    closeClicked: false,
    }

closeWasClicked() {
    return(this.state.closeClicked)
}

render() {
    return (
        <View style = {styles.container}>
            <View style = {styles.mainContent}>
                <TouchableHighlight 
                    style = {styles.closeButton}
                    onPress = { () => {this.setState({closeClicked: true})} } >
                </TouchableHighlight>
            </View>
        </View>
    );
}
}

似乎我定义“ ItemDetail”组件的引用的方式存在问题，因为当我键入console.log(this.itemdetail)或console.log(this.refs)以及{{ 1}}通话无效。

如果有人能帮助我解决我的问题，我将非常感激（我宁愿找到无法解决此问题的方法，也不想直接尝试使用Modal / Redux / etc来实现其他功能）。

React Native：通过ref调用子组件函数

0 个答案: