reactjs - 如何隐藏 primereact 日历组件

Question

有办法使用自定义按钮隐藏日历吗？

<Calendar onHide={handleCalendarHide} />;

现在我只能通过单击日历外部来隐藏日历，此触发 onHide 事件，但我想在选择日期然后单击“应用”按钮时隐藏日历。

有办法触发某些功能来隐藏此日历吗？

Answer 1

尝试下面的代码。它在输入元素旁边显示了一个内置按钮，除了输入元素获得焦点之外，该按钮还可以显示/隐藏日历:

const [date3, setDate3] = useState(null);

<Calendar id="icon" value={date3} onChange={(e) => setDate3(e.value)} showIcon />

直接取自组件页面:https://www.primefaces.org/primereact/calendar/

但是如果您确实需要自定义按钮来显示/隐藏日历叠加层，请尝试以下操作:

const [date3, setDate3] = useState();
const [isVisible, setIsVisible] = useState(false);

const handleVisibility = (e) => {
  setIsVisible(!isVisible);
};

const handleVisibleChange = (e) => {
  console.log(e);
};

<Button label="Custom Button" onClick={handleVisibility} />
<Calendar
    id="icon"
    value={date3}
    onChange={(e) => setDate3(e.value)}
    showOnFocus={false}
    visible={isVisible}
    onVisibleChange={handleVisibleChange}
  />

演示:https://f8n50l.csb.app/