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

最新推荐文章于 2022-07-12 17:44:50 发布
最新推荐文章于 2022-07-12 17:44:50 发布
阅读量1k 收藏 2
点赞数
分类专栏： react 前端 文章标签： react js refs checkbox reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41166866/article/details/105511680
版权
该博客介绍了在React项目中如何利用ref实现复选框选中后在底部添加内容，以及取消选中时删除对应内容的功能。通过创建子组件并使用ref，当点击删除按钮时，可以触发子组件中的方法改变状态，从而达到父组件与子组件的状态同步。
摘要由CSDN通过智能技术生成
  • 需求为：react项目中，点击复选框，在底部添加一栏；取消选中复选框，删除对应的一栏；在底部点击删除按钮，删除此栏同时取消上方复选框选中状态。

案例

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

最低0.47元/天 解锁文章
摸鱼君junf
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react实现复选框全选和反选组件效果
10-14
通过这种方式，我们可以看到如何在React中使用状态和事件来创建交互式的复选框全选和反选组件。 总结来说，实现React复选框全选和反选组件的关键在于管理状态（特别是`chooseAll`和`inters`）以及正确处理点击事件...
checkbox做全部选中，全部取消效果
weixin_30640769的博客
08-11 139
批量选中、取消多个checkbox的用法很简单，这个功能也很常用。这里做个总结。 在HTML中的写法： 1 <div id="ftpFileDownTr"> 2 <button onclick="getBatchValues();" value="获取批量选择的值"/> 3 </div> 4 <table> 5 ...
element 清空checkbox选中的数据与注意事项
weixin_47092531的博客
05-19 3435
element 清空checkbox选中的数据与注意事项
vue的checkbox多选框获取其是否选中和获取其自定义属性值
weixin_30433075的博客
06-15 1290
1.第一种情况点击一个全选按钮使下面的所有的checkbox多选框选中或取消选中。如下图： 获取这个多选框的选中还是没有选中的状态 首先给这个全选的input多选框定义一个点击事件，给点击事件传入参数$event,从$event里面获取这个checkbox 选中状态true或false 2.第二种情况是获取循环生成的多个name相同的checkbox的一个多个选中的状态。 ...
react native开发：实现点击左侧选择项，右侧显示内容的功能
shakdy的博客
03-12 6497
react native开发：实现点击左侧选择项，右侧显示内容的功能需求：界面分为左右两部分，左侧为选择栏，右侧为显示的内容，点击左侧选择项，右侧显示内容的功能 如下图： 思路：首先思考问题：****1. 如何实现左侧栏，点击组件改变颜色？ 2. 如何实现点击左侧选项，右侧显示想要内容？如何实现左侧栏，点击组件改变颜色？在style中通过条件判断改变样式如何实现点击左侧选项，右侧显示想要内容
React实现点击左边菜单右边展示组件
qq_26889291的博客
07-12 1526
React实现点击左边菜单右边展示组件
jQuery实现统计复选框选中数量
10-25
本文将详细介绍如何使用jQuery库来实现这个功能，即统计复选框选中数量。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画等任务。在这个示例中，我们主要利用jQuery来获取复选框的状态...
React Native 的圆形复选框组件
06-08
ReactNativeCircleCheckbox 用于 React Native 的圆形复选框组件。 安装 npm install react-native-circle-checkbox --save Usage import CircleCheckBox, {LABEL_POSITION} from 'react-native-circle-checkbox'; ...
复选框选中表格中的行进行删除行操作
04-29
要实现选中复选框后删除对应行的功能，我们需要监听复选框的`change`事件。当用户改变复选框的状态时，触发事件处理函数，检查选中的复选框，并根据其关联的行进行操作。 4. **数据绑定（Data Binding）**： 在...
React中Ref 的使用方法详解
10-15
创建Ref对象并将其赋值给组件实例的属性，然后在`ref`属性中使用它： ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } ...
react-checkbox-context:微型软件包，使在React中使用一组复选框更加容易
05-06
:atom_symbol: React复选框上下文该程序包在停止使用我的使用方式后，受到了极大启发。 元素突然必须是直接子代（这在我的用例中是不可能的）或CheckboxGroup明确需要具有checkboxDepth道具（对我来说不够灵活）。 ...
checkbox:React复选框
05-04
rc-复选框复选框ui组件以进行React。安装用法import checkbox from 'rc-checkbox' ;export default ( ) => < checkbox> ;兼容性 IE浏览器/边缘 火狐浏览器 Chrome合金 苹果浏览器 电子IE11，Edge 最近2个版本最近2个...
react-native-checkbox：React Native的复选框组件
02-05
@react-native-community/checkbox 复选框的本机组件Android示例iOS示例Windows示例支持RN版本复选框版本> 0.60＆<0> = 0.3（从0.4开始支持IOS） <0> = 0.62以在Windows上运行0.5入门yarn add @react-native-...
JS中使用react-tooltip插件实现鼠标悬浮显示框
10-17
本文将会详细介绍如何在React项目中使用react-tooltip插件来实现鼠标悬浮显示框的功能。 ### react-tooltip插件简介 react-tooltip是一个专门为React设计的提示框工具库。它可以非常简单地集成到React项目中，并且...
checkbox:React的Material复选框实现
05-01
MaterialR复选框@ materialr /复选框 React的Material复选框实现安装$ npm install --save @materialr/checkbox演示版完整的演示可在上，其中包含所有变体。组件默认导出import Checkbox from '@materialr/checkbox'...
模拟 React 03 组件更新、ref、key、删除节点
皮蛋很白的博客
02-18 1152
组件更新 示例 function Heart(props) { return <div>{props.title}&hearts;</div> } class Alert extends TinyReact.Component { constructor(props) { super(props) this.state = { title: 'Default Title' } this.handleClick = this
vue中使用ref属性进行全选反选功能的实现
qq_43036190的博客
02-09 961
vue中使用ref属性进行全选反选功能的实现 vue中给我们提供了一种操作DOM的方属性：ref。绑定在DOM元素上的时候，和id差不多，通过（this.$refs来调用）。 下面就是就是我用vue写的全选(反选)功能的一个小案例： <style> .ch{ width: 20px; height: 20px; } ...
【React.js】实现下拉列表多级联动、与优先级添加、删除功能
qq_37086980的博客
06-18 1981
需求：下拉列表第一级选中的，二级不能再选中，三级不能选中一二级选中的，以此类推
antdv复选框,实现点击表格当前行选中或取消
最新发布
05-26
1. 在表格的 columns 中添加一个 render 函数，用于渲染复选框列。render 函数需要返回一个 antdv 的 Checkbox 组件，并设置其 checked 属性为当前行是否选中的状态。 2. 在表格的 rowSelection 对象中，设置 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值