React组件之多选Checkbox实例
更新时间:2023年10月23日 14:22:34 作者:追影的React开发者
这篇文章主要介绍了React组件之多选Checkbox实例,具有很好的参考价值,希望对大家有所帮助,
React组件之多选Checkbox
import React, { PureComponent } from "react"; import { List, NavBar, Checkbox } from "antd-mobile"; import { Icon } from "antd"; import TouchFeedback from "rmc-feedback"; import NavContentContainer from "./NavContentContainer"; import PanelContentContainer from "./PanelContentContainer"; export default class Checkbox_ extends PureComponent { 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; const result = (init || []).filter(i => i === value); return result.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={ <TouchFeedback activeClassName="primary-feedback-active"> <Icon type="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 { const odd = 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 } }); }} />
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
本篇文章主要介绍了React-Native解决键盘遮挡问题(Keyboard遮挡问题),具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-07-07
最新评论