热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

react中使用ref实现复选框选中后增加删除

需求为:react项目中,点击复选框,在底部添加一栏;取消选中复选框,删除对应的一栏;在底部点击删除按钮,删除此栏同时取消上方复选框选中状态。思路:复选框部分作为子组件checke

react

  • 需求为:react项目中,点击复选框,在底部添加一栏;取消选中复选框,删除对应的一栏;在底部点击删除按钮,删除此栏同时取消上方复选框选中状态。

  • 思路:复选框部分作为子组件

  • checked的值由state中的checkbox值决定,而父组件中,点击删除按钮后要执行子组件中的函数以改变子组件state中的值,此时就需要用到ref。

  • 方法为:在父组件引用子组件时,用下面这个语句:

  • 这样子组件中的值就可以作为父组件中operationalCheckBoxItems对象中的属性,在父组件中打印this.operationalCheckBoxItems的结果为:

  • 删除功能:

本文GitHub


推荐阅读
author-avatar
nuabolalalala5_760
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有