Reactjs 如何在react native中实现单击编辑、选择项目和删除功能

在下面包含的屏幕截图中，当用户单击标题上的编辑按钮时，将文本X保存到购物车的组件需要更改。基本上，一个复选框将出现在包含X的所有组件的右侧，并保存到购物车。我如何实现这一点

我认为这样做的一种方法是，当用户单击标题上的编辑按钮时，将以某种方式通知已将X保存到购物车的组件，然后我可以更改该组件的视图

这是实现编辑功能的正确方法吗？如果没有，如何做到这一点

另外，我没有使用Redux。 屏幕截图下方提供的代码

代码

保存的交易页面（单击选项卡栏上的心脏图标时显示此页面）

export const SavedDealsPageStack=createStackNavigator({
保存的数据：{
屏幕：savedDealsPage，
导航选项：{
标题：
}        
},
DealsDetailPage：{
屏幕：DealsDetailPageStack，
},
},
{
导航选项：{
标题：空
}
});

SavedDealHeader组件

导出默认类SavedDealHeader扩展组件{

    render(){
        return (
            <View style={styles.savedDealHeaderContainer}>
                <View style={styles.headerComponentDivider}>
                    <View style={styles.headerTitleContainer}>
                        <Text style={textStyles.savedDealHeaderTitle}>Temp List</Text>
                    </View>
                    <View style={{paddingRight:edgePadding}}>
                        <Text style={textStyles.editButton}>Edit</Text>
                    </View>
                </View>
            </View>
        )
    }
}

render（）{
返回(
临时名单
编辑
)
}
}

正在使用React native的FlatList组件呈现列表项

---

调用Card组件来呈现列表中的每个项目（该组件位于不同目录中的单独JS页面中）。

顶级导航组件可以跟踪其状态下的当前模式。然后，如果通过道具将此“mode”变量向下传递给每个下部组件，则当state.mode更改时，下部组件的道具也会更改，导致它们重新渲染，并显示复选框。然后，您可以进一步添加任何条件，以仅在复选框已被选中或按您的意愿显示复选框。请参阅下面的简化示例，了解向下流入下部组件的数据

函数SaveCartCheckBox（道具）{
如果（！道具模式）{
返回false；
}
返回(
X保存到购物车
props.onClick（）}
/>
);
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
编辑模式：对，
保存数据项：{
1:错,，
2:错,，
3:对
}
};
}
保存项目（项目编号）{
让savedItems=this.state.savedItems；
savedItems[itemNo]=！savedItems[itemNo]；
这是我的国家({
储蓄存款
});
}
变更模式（）{
const currentMode=this.state.editmode；
这是我的国家({
editmode:！currentMode
});
}
render（）{
返回(
{this.changeMode（）}}>changeMode
{
Object.keys（this.state.savedItems）.map（（index，itemState）=>{return(
this.saveItem（索引）}
saved={this.state.savedItems[index]}
mode={this.state.editmode}
/>
)})
}     
)
}
}
ReactDOM.render(
,
document.getElementById（“react”）
);
.item{
显示：块；
边框：2倍纯色灰色；
背景：浅绿色；
边缘：0.2米；
文本对齐：居中；
}
输入[type='checkbox']{
变焦：2；
位置：相对位置；
底部：10px；
}

在没有看到图像之外的任何代码的情况下，人们无法帮助您。共享您的代码，共享您迄今为止尝试过的内容以及遇到的问题。您可以传递“保存到卡”产品id数组，并检查与列表中的产品是否相等。是否可以让我的卡组件知道已单击“编辑”按钮？“编辑”出现在导航标题中，其中“卡”组件是我的SavedDelpage正在使用的组件。请参阅上面的SavedDealPageStack代码。Hi@Chetan，您可以向“导航标题”组件发送一个单击处理程序，将编辑模式的状态保留在父SavedDealPageStack中，然后将其传递给需要的组件。如果您需要跟踪每个组件复选框状态，我已经更新了代码。
    render(){
        return (
            <View style={styles.savedDealHeaderContainer}>
                <View style={styles.headerComponentDivider}>
                    <View style={styles.headerTitleContainer}>
                        <Text style={textStyles.savedDealHeaderTitle}>Temp List</Text>
                    </View>
                    <View style={{paddingRight:edgePadding}}>
                        <Text style={textStyles.editButton}>Edit</Text>
                    </View>
                </View>
            </View>
        )
    }
}