react纯手写全选与取消全选

最新推荐文章于 2023-02-22 14:36:32 发布
最新推荐文章于 2023-02-22 14:36:32 发布
阅读量393 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/MDGE/p/10140959.html
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
<div id="my"></div>
<script type="text/babel">
class FormSelectT extends React.Component{
constructor(){
super()
this.state={
checkAll: false,
checkArr: [{name:'看书',status:false},{name:'睡觉',status:false},{name:'喝水',status:true}]
}
}
changeAll(e){
let {checkAll,checkArr} = this.state;
let check = e.target.checked;
checkAll = check;
checkArr.map((val)=>{
return val.status = check
})
this.setState({
checkAll: checkAll,
checkArr: checkArr
})
}
listControllAll(e){
let {checkArr,checkAll} = this.state;
checkArr.map((val)=>{
if(val.name == e.name){
return val.status = e.status
}
})
this.setState({
checkArr:checkArr
});
let changecheckAll=checkArr.every((val)=>{
return val.status
});
 
this.setState({
checkAll:changecheckAll
})
}
render(){
let {checkAll,checkArr} = this.state;
let self = this;
let arrHobby = checkArr.map((val,index)=>{
return <FormSelectB key={index} {...val} listControllAll={self.listControllAll.bind(self)}/>
})
return (
<div>
<input type="checkbox" checked={checkAll} onChange={(e)=>this.changeAll(e)}/><label>全选</label>
<ul>
{arrHobby}
</ul>
</div>
)
}
}
class FormSelectB extends React.Component{
constructor(props){
super(props)
this.state={
name:props.name,
status:props.status
}
}
changeList(e){
let check = e.target.checked;
let {name,status} = this.state;
this.setState({
status:check
},function(){
this.props.listControllAll({name:this.state.name,status:this.state.status})
})
}
componentWillReceiveProps(nextProps,prevProps){
let {status} = this.state
if(nextProps.status!=prevProps.status){
this.setState({
status:nextProps.status
})
}
}
render(){
let {name,status} = this.state;
return(
<li><input type="checkbox" checked={status} onChange={(e)=>{this.changeList(e)}}/><label>{name}</label></li>
)
}
}
ReactDOM.render(
<div>
<FormSelectT/>
</div>,
document.getElementById('my')
)
</script>
</body>
</html>

转载于:https://www.cnblogs.com/MDGE/p/10140959.html

anlin9217
关注
React实战 Tree组件简单实现
qq_38164763的博客
07-06 5480
一、前言   这个简单树组件也是自己为了熟悉react而做的，所以只是简单实现了基本功能，但是做完之后感觉其中也有很多需要自己总结的地方。其中还有几个未解决的问题自己在解决之后会修改这篇博文。话不多少，首先来看看我们到底要实现什么效果 我们的目标很简单，就是实现这样一个功能就行了，但是注意需要有一个半勾选的状态，就是父节点的某个子结点被选中了，那么这个结点就是半勾选状态。 二、思路分析   当我...
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
React实现全选功能
10-14
主要为大家详细介绍了React实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React实现全选和反选
weixin_34405354的博客
04-27 1361
CheckboxList.js class CheckboxList extends React.Component{ constructor(props){ super(props) this.state = { data: [ { 'name':'red', 'checked': true }, { 'name':'green',...
react 实现列表选择，在此点击取消
weixin_30855761的博客
12-19 703
handeSecondQuestionOptions(item){//处理第二题 console.log(item.id) if(!this.state.data.includes(item.id)){ console.log("没有包含当前的对象") this.state.data.push(item.id) this.state.dataList.push(item)...
React中的全选反选问题
weixin_30325071的博客
11-26 171
全选反选问题 1.在state里维护一个数组，例如showArr:[] 2.绑定点击事件的时候将当前这个当选按钮的index加进来 <span className='arrow' onClick={this.showInfo.bind(this,showID)}></span> 3.点击事件showInfo showInfo(rowID){ let ro...
React 第6节 全选功能的2种实现方式
weixin_42549581的博客
06-26 272
ddd
react级联选择器/支持多选/单选
01-31
在React.js开发中，"react级联选择器/支持多选/单选"是一个常见的组件需求，用于构建具有层级关系的数据选择功能。这种组件通常被用在如地区选择、组织结构选择等场景，用户可以逐级展开选项，进行单选或多选操作。...
树形穿梭框的代码实现
王为仁的博客
03-04 1万+
树形穿梭框的代码实现效果如下图代码来一波 效果如下图 代码来一波 js import React, { Component } from 'react'; import { Tree, Checkbox, Button, Input, Icon } from 'antd' import styles from "./TreeSelectTransfer.less" c...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
qianduan666a的博客
07-14 549
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈） 文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css 和js热点面试题 Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子
react实现复选框全选和反选组件效果
10-14
主要为大家详细介绍了react实现复选框全选和反选组件效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
react-native 相册（全选、删除、分享）
07-07
这个项目实现了本地图片、视频的展示，图片、视频的全选、删除功能
react实现全选和反选_react实现复选框全选和反选组件效果
weixin_31068553的博客
01-30 1314
本文实例为大家分享了react实现复选框全选和反选组件的具体代码，供大家参考，具体内容如下运行效果图如下：代码：import React, { Component } from 'react';import { withRouter } from 'react-router-dom';// import Menu from '../menu/Menu.jsx';class List extends...
react实现复选框全选和反选组件
CodingNoob
03-04 4368
react实现复选框全选和反选组件效果 运行效果图如下： import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; // import Menu from '../menu/Menu.jsx'; class List extends Component { c...
react实现全选和反选_react实现全选和反选
weixin_42320061的博客
01-13 690
class Checkboxcomponent extends React.Component{constructor(props){super(props);this.state = {chooseList : ['apple','lemon','melon','orange'],chooseCheck : 0,Allchoose : false,reverseCheck : false,isA...
简单手写实现React类组件的state批量更新
小王的技术库
11-07 652
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
React移动端中实现全选和不选的实现
Anony_me的博客
02-22 309
属性，表示该数据是否被选中。当点击全选按钮时，会将所有数据的。，当数据有一个未被选中时，全选按钮也会被设为未选中状态。表示要选择的数据列表，每个数据对象中有一个。下面是一种实现方式，其中的。
react点击全选所有分页全部选中
最新发布
09-12
在React中，实现点击全选所有分页的功能通常会涉及到状态管理以及处理组件间的通信。首先，你需要在组件的状态中维护一个表示是否全选的标志，比如`selectAll`，初始化时设为`false`。然后，可以创建一个“全选”按钮或者事件处理器，当用户点击这个按钮时，更新`selectAll`的状态，并通过 prop 或者 context 将变化传递给所有的分页组件。 在分页组件内部，你可以检查`selectAll`的状态，如果为`true`，则设置当前项为选中状态；反之，则设置为未选中。例如，如果你使用`map`函数遍历分页内容，可以在渲染每个项时检查`selectAll`： ```jsx {items.map((item, index) => ( <div key={index}> {selectAll ? <input type="checkbox" checked /> : <input type="checkbox" />} {/* 其他元素如文字描述 */} </div> ))} ``` 当你点击全选按钮时，可以通过父组件发送一个自定义事件，更新`selectAll`的状态，并通知所有子组件同步更新： ```jsx // 父组件 import React, { useState } from 'react'; function ParentComponent() { const [selectAll, setSelectAll] = useState(false); const toggleAllSelection = () => { setSelectAll(!selectAll); // 通过事件总线或props向下广播 this.props.onToggleAll(selectAll); // 假设你有一个回调接收这个操作 }; return ( {/* ... */} <button onClick={toggleAllSelection}>全选</button> {/* 子组件通过props接收到selectAll */} {this.props.children} ); } export default ParentComponent; ``` 然后在分页组件中，接受并处理`onToggleAll`这个方法： ```jsx // 分页组件 const PageList = ({ items, onToggleAll }) => { const handleCheckboxChange = (e) => { // 如果全选，则所有项都勾选 if (e.target.checked && e.target.indeterminate === false) { onToggleAll(true); } // 否则，清除所有项的选中状态 else { onToggleAll(false); } }; return ( <ul> {items.map((item, index) => ( <li key={index}> <input type="checkbox" onChange={handleCheckboxChange} /> {/* 内容 */} </li> ))} </ul> ); }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值