import React, { useContext, useState, useEffect, useRef } from 'react'; import { connect, history } from 'umi'; import { Form, Card, TimePicker, DatePicker, Row, Col, Input, Select, Button } from 'antd'; const { TextArea } = Input; const { Option } = Select; const { RangePicker } = DatePicker; const SelectCycleSelectInput = ({ value = {}, onChange }) => { const [selectType, setSelectType] = useState(1);//1为周,2为月 const [dayCount, setDayCount] = useState(null); const [monthSelectDay, setMonthSelectDay] = useState(null); useEffect(() => { let selectDay = new Array(31).fill(1); let monthDays = selectDay.map((item, index) => { return index + 1; }); console.log(`monthDays is:`, monthDays); setMonthSelectDay(monthDays); }, []); //触发类型 const triggerChange = (changedValue) => { if (onChange) { console.log({ ...value, dayCount, selectType, ...changedValue, }); onChange({ ...value, dayCount, selectType, ...changedValue, }); } }; const onDayCountChange = (newDayCount) => { // if (!('dayCount' in value)) { // setDayCount(newDayCount); // } setDayCount(newDayCount); triggerChange({ dayCount: newDayCount, }); }; const onSelectTypeChange = (newSelectType) => { // if (!('selectType' in value)) { // setSelectType(newSelectType); // } setSelectType(newSelectType); setDayCount(null);//peter new add triggerChange({ selectType: newSelectType, dayCount: null }); }; console.log(`render selectType is:`, selectType); return (<Row> <Col span={8}> <Select value={value.selectType || selectType} onChange={onSelectTypeChange} > <Option value={1}>每周</Option> <Option value={2}>每月</Option> </Select> </Col> <Col span={16}> { selectType === 1 && <Select style={{ marginLeft: '8px' }} allowClear placeholder='请选择' onChange={onDayCountChange} > <Option value={1} key={1}>星期一</Option> <Option value={2} key={2}>星期二</Option> <Option value={3} key={3}>星期三</Option> <Option value={4} key={4}>星期四</Option> <Option value={5} key={5}>星期五</Option> <Option value={6} key={6}>星期六</Option> <Option value={7} key={7}>星期日</Option> </Select> } { selectType === 2 && <span> <Select style={{ margin: '0 5px', width: '80%' }} allowClear placeholder='请选择' onChange={onDayCountChange}> { monthSelectDay && monthSelectDay.map(item => ( <Option key={item} value={item}>{item}</Option> )) } </Select> 日 </span> } </Col> </Row> ) }; export default SelectCycleSelectInput;