antd 下拉框怎么联动_解决Antd 里面的select 选择框联动触发的问题

有两个 select框,且这俩select框是关联的,触发select1,select2里面才会有值。

但是现在的问题是这样的:

antd 下拉框怎么联动_解决Antd 里面的select 选择框联动触发的问题_第1张图片

触发select1,触发select2,再触发select1,此时select2里面的值变成了上次一选中的value 值,而不会被清空。

解决办法:

使用Select 里面的value属性,来进行清空

{

packagedPaperList.map((item,idx)=>(

{item.packagedPapersName}

))

}

selectPaper(val,item)}>

{

paperList.map((item,idx)=>(

{item.paperName}

))

}

// select1里面的判断

const selectPackage = (value) =>{

if(paperId != '请选择名称'){

setPaperId('请选择名称');

}

setPackagedPapersId(value)

paperListFn(value)

}

补充知识:antd RangePicker限制选择时间跨度是30天

我就废话不多说了,大家还是直接看代码吧~

const { RangePicker } = DatePicker;

const [selectDate, setSelectDate] = useState(null);

/* 控制下单时间选择范围30天 */

const disabledTaskDate = (current) => {

if (!current || !selectDate) return false;

const offsetV = 2592000000; //30天转换成ms

const selectV = selectDate.valueOf();

const currenV = current.valueOf();

return (calcMinus(currenV, offsetV) > selectV || calcAdd(currenV, offsetV) < selectV) ? true : false;

}

/* 选择任务时间变化 */

const onDateChange = (dates) => {

if (!dates || !dates.length) return;

setSelectDate(dates[0]);

}

const onDateOpenChange = () => {

setSelectDate(null);

}

showTime={{ format: 'HH:mm:ss' }}

disabledDate={disabledTaskDate}

onCalendarChange={onDateChange}

onOpenChange={onDateOpenChange}

/>

以上这篇解决Antd 里面的select 选择框联动触发的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

本文标题: 解决Antd 里面的select 选择框联动触发的问题

本文地址: http://www.cppcns.com/wangluo/javascript/357631.html

你可能感兴趣的:(antd,下拉框怎么联动)