Radio与Check
import React, { Component, useState } from 'react' import { Checkbox, Radio, Select, Modal } from 'antd' // https://ant.design/components/overview-cn/ const CheckboxGroup = Checkbox.Group; const { Option } = Select; export default class CompanyAuto extends Component { constructor(props) { super(props) this.state = { checkOptions: [ { label:"日常报销", value:"日常报销" },{ label:"差旅报销", value:"差旅报销" },{ label:"付款申请", value:"付款申请" },{ label:"借款申请", value:"借款申请" } ], list: [ { audit_scope: 8, warn_level: 1 }, { audit_scope: 15, warn_level: 0 } ] } } componentDidMount() { const { currTab } = this.state } /* 审核类型全选 */ onInvoiceCheckAllChange = (val, id) => { console.log('e,options',val , id) }; /* 审核类型单选 */ onInvoiceTypeChange = (val, id) => { console.log('e,options', val, id) }; /* 审核力度 */ typeRadioChange = (val, id) => { console.log('val, id', val, id); } render() { const { list, checkOptions } = this.state return ( <div> {list.map((i,idx) => ( <React.Fragment key={`k${idx}`}> <div key={`t${idx}`} style={{marginTop: "20px"}}> <TypeCheckbox plainOptions={checkOptions} auditScope={i.audit_scope} onInvoiceTypeSingleChange={(valTen) => this.onInvoiceTypeChange(valTen, idx)} onInvoiceTypeCheckAllChange={(valTen) => this.onInvoiceCheckAllChange(valTen, idx)}></TypeCheckbox> </div> <div key={`l${idx}`}> <TypeRadiobox radioChange={(val) => this.typeRadioChange(val, idx)} radVal={i.warn_level}></TypeRadiobox> </div> </React.Fragment>) )} </div> ) } } const TypeCheckbox = (props) => { const { plainOptions, auditScope = 0 } = props const auditList = auditScope.toString(2).split("").reverse(); // 十进制转二进制展示 let defaultCheckedList = []; plainOptions.forEach((ele, idx) => { if(auditList[idx] == 1){ defaultCheckedList.push(ele.value) } }); const [checkedList, setCheckedList] = useState(defaultCheckedList); const [indeterminate, setIndeterminate] = useState(!!defaultCheckedList.length && defaultCheckedList.length < plainOptions.length); const [checkAll, setCheckAll] = useState(defaultCheckedList.length === plainOptions.length); const [selectValue, setSelectValue] = useState('快车') // 单选 const onChange = (list) => { let checkList = plainOptions.map(e => { if( list.some(i => i === e.value ) ) { return 1 } else { return 0 } }) setCheckedList(list); setIndeterminate(!!list.length && list.length < plainOptions.length); setCheckAll(list.length === plainOptions.length); // props.onInvoiceTypeSingleChange(list) // 二进制转十进制保存 const twoConversionTen = parseInt(checkList.reverse().join(""), 2) props.onInvoiceTypeSingleChange(twoConversionTen) }; // 全选 const onCheckAllChange = e => { Modal.confirm({ content: '确定要修改吗?', type: 'warning', onOk: () => { const tList = e.target.checked ? plainOptions.map(item => item.value) : []; const checkList = e.target.checked ? plainOptions.map(item => 1) : plainOptions.map(item => 0); setCheckedList(tList); setIndeterminate(false); setCheckAll(e.target.checked); const twoConversionTen = parseInt(checkList.reverse().join(""), 2) // 二进制转十进制保存 props.onInvoiceTypeCheckAllChange(twoConversionTen) }, onCancel: () => {} }) }; const handleSelectChange = e => { Modal.confirm({ content: '确定要修改吗?', type: 'warning', onOk: () => { setSelectValue(e); }, onCancel: () => {} }) }; const xOptionList = [{ value: "快车" },{ value: "专车" }] return ( <div> <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}> 全选 </Checkbox> {/* <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> */} <Checkbox.Group value={checkedList} onChange={onChange}> {plainOptions.map((e, i) => { return ( <React.Fragment>{e.label == "付款申请" ? ( <React.Fragment> <Checkbox value={e.value}>{e.value}</Checkbox> <Select value={selectValue} onChange={handleSelectChange}> {xOptionList.map((item,idx) => <Option value={item.value} key={idx}>{item.value}</Option>)} </Select> </React.Fragment>) : ( <Checkbox value={e.value}>{e.label}</Checkbox> )}</React.Fragment> ) })} </Checkbox.Group> </div> ) } const TypeRadiobox = (props) => { const radioOptions = [ { "detail_name":"提示", value: 0 },{ "detail_name":"警告", value: 1 },{ "detail_name":"禁止提交", value: 2 } ] const { radVal } = props const [radioVal, setRadioVal] = useState(radVal); const onRadioChange = e => { setRadioVal(e.target.value); props.radioChange(e.target.value) }; return ( <div> <Radio.Group onChange={onRadioChange} value={radioVal} > {radioOptions.map((i, index) => { return ( <Radio value={i.value} key={i.detail_name}> {i.detail_name} </Radio> ); })} </Radio.Group> </div> ) }