javascript - 单击文本或图像时如何显示 HTML 输入日期？

Question

当我单击一些文本或图像时，我想弹出一个日期选择器。
我正在使用 reactjs。我正在使用 HTML input type="date"不是 React-datepicker 库。
这是我的代码:

    import { useRef } from "react";
    const add = () => {
      const interviewDateRef = useRef();
      const handleInterviewDateClick = () => {
        interviewDateRef.current.focus();
      };
    
      return (
        <>
          <button onClick={handleInterviewDateClick}>Change Date</button>
          <input type="date" ref={interviewDateRef} className="hidden" />
        </>
      );
    };
    export default add;

这里是 codesandbox .
我希望日期选择器正常工作，但也可以在单击文本或图像时出现。我怎样才能做到这一点？
谢谢你。

Answer 1

您可以通过打开焦点下拉菜单来做到这一点。由于单击按钮聚焦输入。
这是如何做到这一点

// Get a hook function
const {useRef} = React;

const Add = () => {
  const interviewDateRef = useRef();
  const handleInterviewDateClick = () => {
    interviewDateRef.current.focus();
  };

  return (
    <div>
      <button onClick={handleInterviewDateClick}>Change Date</button>
      <input type="date" ref={interviewDateRef} className="hidden" />
    </div>
  );
};

// Render it
ReactDOM.render(
  <Add />,
  document.getElementById("react")
);

.input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

检查此 SO answer了解更多信息