Question

我正在文件中调用一个组件，所以我在父组件中创建了一个函数，并希望点击子组件onPress的此函数MenuItem，我也想点击hideMenu子组件同时运行。请为我提供解决方案。谢谢

父组件

onView(){
    alert('Dairu');
}
{this.state.clientsList.map((item) => {
    return (
        <View style={styles.caseItem} key={item.ID}>
            <Card style={styles.card}>
                <CardItem>
                    <Body>
                        <View style={styles.rowTitle}>
                            <Text style={styles.title}>{item.FullName}</Text>
                            <CustomMenu onView={() => this.onView()} />
                        </View>
                        <View>
                            <Text style={styles.lbl}>Email: <Text style={styles.lblValue}>{item.EmailID}</Text></Text>
                            <Text style={styles.lbl}>Client Type: <Text style={styles.lblValue}>{item.ClientType}</Text></Text>
                        </View>
                    </Body>
                </CardItem>
            </Card>
        </View>
    );
})}

子组件

hideMenu = () => {
    this._menu.hide();
};
render() {
    return (
        <Menu
            ref={this.setMenuRef}
            button={<Icon type="Feather" name="more-vertical" onPress={this.showMenu} style={{ fontSize: 20, color: '#555' }} />}
        >
            <MenuItem onPress={this.props.onView}>View</MenuItem>
            <MenuItem onPress={this.hideMenu}>Edit</MenuItem>
            <MenuItem onPress={this.hideMenu}>Delete </MenuItem>
        </Menu>
    );
}

Answer 1

您只需要在 hideMenu 函数上添加this.props.onView()

hideMenu = () => {
    this._menu.hide();
    this.props.onView();
};

此外，您可以将参数传递给父组件，例如：

this.props.onView(arg1, arg2);

和父组件中的

onView={(arg1, arg2)=> onView(arg1, arg2)}

Answer 2

您已经将onView道具传递给了子对象。只需在子组件的hideMenu方法中调用此方法：

hideMenu = () => {
    this._menu.hide();
    this.props.onView();
};

在onPress React Native中传递道具和功能

2 个答案: