React的多选Checkbox组件怎么使用(checkbox,react,编程语言)

接下来，请跟着小编一起来学习吧！

代码如下：

importReact,{PureComponent}from"react";
import{List,NavBar,Checkbox}from"antd-mobile";
import{Icon}from"antd";
importTouchFeedbackfrom"rmc-feedback";
importNavContentContainerfrom"./NavContentContainer";
importPanelContentContainerfrom"./PanelContentContainer";
exportdefaultclassCheckbox_extendsPureComponent{
constructor(props){
super(props);
this.state={select:[]};
}
componentWillReceiveProps(props){
const{show,init}=props;
if(show){
this.setState({select:init||[]});
}
}
getDefaultChecked=value=>{
const{init}=this.props;
constresult=(init||[]).filter(i=>i===value);
returnresult.length!==0;
};
render(){
const{show,data,title,hide,save}=this.props;
const{select}=this.state;
return(
<div
style={{
display:show?"block":"none",
zIndex:1,
position:"absolute",
backgroundColor:"#fff",
overflowY:"auto",
top:0,
bottom:0,
left:0,
right:0
}}
>
<NavBar
className="global-navbar"
mode="dark"
icon={
<TouchFeedbackactiveClassName="primary-feedback-active">
<Icontype="left"/>
</TouchFeedback>
}
onLeftClick={()=>hide()}
rightContent={[
<Icon
type="check"
style={{marginRight:"16px"}}
onClick={()=>save(select)}
/>
]}
>
{title}
</NavBar>
<NavContentContainer>
<PanelContentContainer>
<List>
{data.map(i=>(
<Checkbox.CheckboxItem
wrap
key={i.value}
defaultChecked={this.getDefaultChecked(i.value)}
onChange={()=>{
if(select.indexOf(i.value)===-1){
select.push(i.value);
}else{
constodd=select;
odd.splice(odd.indexOf(i.value),1);
this.setState({
select:odd
});
}
}}
>
{i.key}
</Checkbox.CheckboxItem>
))}
</List>
</PanelContentContainer>
</NavContentContainer>
</div>
);
}
}

<Checkbox
show={showCheckbox}
data={checkboxData}
title={checkboxTitle}
id={checkboxId}
init={checkboxNum[checkboxId]}
hide={()=>this.setState({showCheckbox:false})}
save={v=>{
this.setState({
showCheckbox:false,
checkboxNum:{...checkboxNum,[checkboxId]:v}
});
}}
/>

效果图：

若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！