React Native待办清单中子组件如何向父组件传值实现任务删除

解决方案 #

核心逻辑是利用React的单向数据流规则，通过props将父组件已定义的状态操作方法传递给子组件触发即可，只需要修改两处代码： #

步骤1：修改父组件的子组件渲染逻辑

找到父组件中遍历渲染Task组件的代码段，新增deleteTask属性，把绑定了当前任务索引的删除方法传递给子组件：

{tasks.map((item, index) => {
  return <Task key={index} text={item.name} deleteTask={() => removeTodo(index)} />;
})}

步骤2：修改子组件删除按钮的触发逻辑

找到子组件中的删除按钮（你注释位置上方的红色TouchableOpacity组件），给它绑定onPress事件，点击时调用父组件传过来的删除方法：

<TouchableOpacity style={styles.itemRight} onPress={props.deleteTask}></TouchableOpacity>

补充说明 #

该实现符合React的状态管理规范：所有状态修改逻辑都统一放在状态所在的父组件维护，子组件只负责触发对应的操作方法，后续如果要新增任务编辑、批量标记完成等功能，都可以用相同的传参逻辑实现。

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