reactjs - 当页面首次加载时，如何在输入中使用占位符文本而不是值（今天的日期）？

Question

我有一个输入，它从完整的日历中获取值，所以每当我选择一个日期时，输入值都会更新。问题是，当页面第一次加载时，我得到的是今天的日期，而不是输入的占位符，即“YYYY/MM/DD”。

如何将占位符显示为初始值，并且仅在用户从日历中选择日期时更新该值？

这是我的代码：

  const [showCalendar, setShowCalendar] = React.useState(false);

  React.useEffect(() => {
    showCalendar
      ? (document.body.style.overflow = "hidden")
      : (document.body.style.overflow = "visible");
    document.addEventListener("click", onclick, false);
    return () => {
      document.removeEventListener("click", onclick, false);
    };
  }, [showCalendar]);

  const { t, i18n } = useTranslation();
  const wrapperRef = useRef(null);
  const { value} = props;
  const { language } = i18n;

const formattedDate = format(value, "y.MM.dd") 


 debugger 
  return (
    <DatePickerWrapper ref={wrapperRef}>
      <InputContainer>
        <Label>Date picker</Label>
        <DatePickerInput
          value = { value ? formattedDate.toString() : 0}
          placeholder= {"YYYY/MM/DD"}
          iconId={"calendar"}
          onClick={() => setShowCalendar(true)}
          />
      </InputContainer> 

使用组件时：

const [date, setDate] = React.useState<Date>(null);

  return (
        <DatePicker
          value={date}
          onChange={setDate}/>

标签： reactjstypescriptinputdatepickerfullcalendar