Javascript 单击时显示反应日历

我正在我的react应用程序上使用

react日历

软件包。将

放在文件上会在前端显示打开的日历

但是如果用户单击输入字段，我想显示日历：

      <div className="form-group">
        <label>Start Date</label>
        <input type="text"/>
        <Calendar style={{display: "none"}} />
      </div>

开始日期

我尝试通过内联样式隐藏日历组件，并在单击时进行更改。但日历也不会隐藏在内嵌css中

---

也查看了文档，但没有找到任何帮助。

最好在日历和输入周围创建一个包装器组件。通过这种方式，它可以管理自己的showCalendar状态，并且可以在其他地方重用

import React, { useState } from "react";
import Calendar from "react-calendar";

const ReactCalendarDemo = ({ date, setDate }) => {
  const [showCalendar, setShowCalendar] = useState(false);
  const handleChange = value => {
    setDate(value);
    setShowCalendar(false);
  };

  return (
    <div>
      <input
        value={date.toLocaleDateString()}
        onFocus={() => setShowCalendar(true)}
      />
      <Calendar
        className={showCalendar ? "" : "hide"}
        value={date}
        onChange={handleChange}
      />
    </div>
  );
};

export default ReactCalendarDemo;

---

1.使用状态变量，如

showCal:false

2。有条件地呈现日历

{this.state.showCal&&}

3。向输入中添加

onFocus

，并使用它将showCal状态更改为true。（react的工作方式与您习惯的不同，它完全基于状态，不直接操作DOM）我有两个日历组件。我假设通过这种方法，两个日历将同时显示。我应该为两个日历声明不同的状态吗？是的，它就是这样工作的：）

.react-calendar.hide {
  display: none;
}