检查两个 MUI 日期选择器的值并显示/隐藏另一个组件

问题描述 投票:0回答:1

我有两个带有开始日期和结束日期的日期选择器

<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
                  <DatePicker
                    sx={{ flex: 1, minWidth: "150px" }}
                    label="Start day"
                    onAccept={handleStartDateChanged}
                  />
                  <DatePicker
                    sx={{ flex: 1, minWidth: "150px" }}
                    label="End day"
                    onAccept={handleEndDateChanged}
                  />
                </Box>
{periodSet ? (
              <Capacity timelineStart={startDate} timelineEnd={endDate} />
            ) : null}
const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [periodSet, setPeriodSet] = useState(false);

  const handleStartDateChanged = (e) => {
    setStartDate(e);
    setPeriodSet(startDate && endDate);
    console.log(periodSet);
  };
  const handleEndDateChanged = (e) => {
    setEndDate(e);
    setPeriodSet(startDate && endDate);
    console.log(periodSet);
  };

当为两者选择一个日期时,我想显示一个在该特定时间段获取数据的组件。 我已经在努力解决这个组件的显示和隐藏问题。选择两个日期后,该组件不会显示。您需要第三个选择来显示该组件。 我认为这是由于在设置

startDate
之前对
endDate
periodSet
的异步设置不完整造成的。状态更改完成时是否有某种回调?或者是否有一些更优雅的方式,例如绑定或类似的方式?或者更好地使用像 useEffect 这样的钩子或其他什么?抱歉,如果这个问题有点愚蠢。我对 React 很陌生

我尝试了不同的事情,比如尝试回调,但行为并不符合预期

setStartDate((e) => {
      setPeriodSet(startDate && endDate);
    });
reactjs react-hooks datepicker mui-x-date-picker
1个回答
1
投票

您不需要为此声明。只是常规变量

const periodSet = Boolean(startData && endDate)
© www.soinside.com 2019 - 2024. All rights reserved.