如何在react中的2个下拉菜单之间正确切换

Question

我有两个日历折叠在引导程序下拉菜单中。下面的代码可以工作，但感觉不干净。

日历是react库中的一个组件。从第一个日历中选择日期后单击，我想关闭第一个下拉列表并打开第二个下拉列表。做这件事的正确方法是什么？

我在React 18上使用严格模式，所以我也想考虑到双重安装进行适当的清理。

这里的正确方法是什么？

//CalendarDropdown.js
const CalendarDropdown = ({date, onChange, open }) => {
const elemRef = useRef(null)
const monthYear = dateHelper.dateToMonthYear(date)
useEffect(() => {
if (open) {
elemRef.current.click()
}
//What do I return here to clean up??
//I also need to pass <func>onChange so that this always closes
}, [open, onChange])
return (
<div className="dropdown" style={styles.dropdownButtonWrapper}>
<button
ref={elemRef}
style={styles.dropdownButton}
className="btn btn-secondary dropdown-toggle" 
type="button btn-outline"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
aria-expanded="false">
<span>{monthYear}</span>
</button>
<ul className="dropdown-menu" onClick={e => e.stopPropagation()}>
<Calendar 
maxDetail="year"
value={date}
onClickMonth={(date, event) => onClickMonth(date, event) } />
</ul>
</div>
)
function onClickMonth(date, event) {
const isSet = onChange(date, event) //doesn't feel proper, but it works
if (isSet) {
elemRef.current.click()
}
}
}

和

//App.js
const App = ({startDate, endDate, setStartDate, setEndDate}) => {
const [toggleEnd, setToggleEnd] = useState(false)
return (
<div className="input-group">
<CalendarDropdown date={startDate} onChange={handleStartDate} open={false}/>
<CalendarDropdown date={endDate} onChange={handleEndDate} open={toggleEnd}/>
</div>
)
function handleStartDate(date, event) {
setStartDate(date)
setToggleEnd(true)
return true
}
function handleEndDate(date, event) {
setEndDate(date)
setToggleEnd(false)
return true
}
}

谢谢

Answer 1

将日历下拉打开状态存储为App中的两个状态，并作为道具(可能是close(来控制CalendarDropdown中cal的可见性

在handleStartDateChange上，将开始日期Cal下拉列表的close状态设置为false，将结束日期Cal的关闭状态设置为true