首頁猿問全選已好用，但是單獨(dú)的checkb...

全選已好用，但是單獨(dú)的checkbox不好用了，打不上√

JavaScript

回首憶惘然 2019-05-21 11:19:47

importReactfrom'react';import{Link}from'dva/router'import{Menu,Icon,Avatar,Layout,Breadcrumb,Button,notification,Select,Pagination,Checkbox,Input}from'antd';importlogofrom'../css/App.css';importayjsfrom'../css/ayjs.css';importReactDOMfrom'react-dom';classSiderextendsReact.Component{state={check:false,checks:false,}showInput=(e)=>{//全選和全不選console.log(e.target.checked);this.setState({check:e.target.checked,checks:e.target.checked,})}onChangea(e){console.log(`checked=${e.target.checed}`);}render(){return();}};exportdefaultSider

查看完整描述

2 回答

撒科打諢

TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個(gè)贊

就你的代碼而言，單選沒效果是因?yàn)?，onChange的時(shí)候this.state.checks的狀態(tài)沒有改變，this也沒有傳入方法里面。改正后onChangea(e){this.setState({checks:e.target.checked,});}這時(shí)你會(huì)發(fā)現(xiàn)單選后所有的Checkbox都被選中了，是因?yàn)槟鉉heckbox設(shè)置的checked都是this.state.checks，所以狀態(tài)都會(huì)改變。所以你的代碼本身就不應(yīng)該這樣寫，這里可以用CheckboxGroup去實(shí)現(xiàn)，具體代碼可參考

反對(duì) 回復(fù) 2019-05-21

楊魅力

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊

renderreturn(c)}onChange={()=>this.onChange()}/>
this.onChange(1)}/>this.onChange(2)}/>this.onChange(3)}/>

);stateconstructor(props){super(props);this.state={checks:[false,false,false]};}onChangeonChange(index){let{checks}=this.state;if(!index){checks=checks.map(()=>!checks.some(c=>c));}else{checks=checks.map((c,i)=>{if((i+1)===Number(index)){return!c;}returnc;});}this.setState({checks});}