react里面實現全選和取消全選，個別選擇等操作，效果如下

代碼：

import React, {Component} from 'react'

export default class Demo extends React.Component{constructor(props,context){super(props,context);this.state = {checklist:[{name:'全選',checked:false},{name:'張三',checked:false},{name:'李四',checked:false},{name:'王五',checked:false},]}}render(){let _self = this;return (<div className="ToDo"><div>這是全選取消全選的demo</div>
{this.state.checklist.length?this.state.checklist.map(function(item,index){return <div key={index}><label><input type="checkbox" onChange={_self.checkThis.bind(_self,item)} checked={item.checked}/>{item.name}</label></div>
                    }):''}</div>
        )}checkThis(item){item.checked = !item.checked;if(item.name==='全選'){ // 如果點擊的是全選，就把所有的選中或全部取消勾選if(item.checked){this.state.checklist.forEach(i=>{i.checked = true;})}else{this.state.checklist.forEach(i=>{i.checked = false;})}}
　　　　　// 如果全選之后，取消勾選其中的一個或多個，則會把全選也取消勾選掉let result = this.state.checklist.some(j=>{if(!j.checked){return true;}})if(result){this.state.checklist[0].checked = false;}let len = this.state.checklist.lengthlet ev = true;for(let a=1;a<len;a++){ // 遍歷，如果列表里除了第一個之外，其他的都勾選的話，就把全選按鈕也勾選掉if(!this.state.checklist[a].checked){ev = false;}}if(ev){this.state.checklist[0].checked = true;}
　　　　　　

　　　　this.setState({ // 每點擊一次更新狀態checklist:this.state.checklist})

}  } 

?若有更優化的方案，歡迎提出~

轉載于:https://www.cnblogs.com/leiting/p/10472327.html

總結

以上是生活随笔為你收集整理的react实现全选、取消全选和个别选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。