反应日期选择器在被点击时返回错误的 ID

如何解决反应日期选择器在被点击时返回错误的 ID

我试图将两个日期选择器的值保存到一个变量中，这样我就可以计算两个日期之间的差异。目前 DatePicker 正在从 App.tsx 接收 id，并且这个想法是在单击 DatePicker 后将此 ID 返回到主应用程序，因此我可以将结果保存到不同的变量中。但是，DatePicker 函数不断返回正在单击第一个 DatePicker 而不是第二个 DatePicker，我不确定为什么。这是 DatePicker 的代码

    export const DatePickerBasicExample = (props) => {
  const [value,setValue] = React.useState<Date | null | undefined>(null);
  const [id,setID] = React.useState<Date | null | undefined>(null);

  const onSelectDate = (date: Date | null | undefined): void => {
    setValue(date);
    const clickedID = id;
    props.getData(clickedID,date);
  };

  const getClickedElement = (e) => {
    setID(e.target.id);
  }

  return (
    <div className={styles.datepicker}>
      <DatePicker
        id={props.id}
        className={controlClass.control}
        formatDate={(date: Date): string => {
          return  date.getDate()  + '.' + (date.getMonth() + 1) + '.' + (date.getFullYear() );
        }}
        label={props.label}
        isrequired={false}
        allowTextInput={true}
        firstDayOfWeek={firstDayOfWeek}
        strings={DayPickerStrings}
        value={value!}
        onClick={getClickedElement}
        // eslint-disable-next-line react/jsx-no-bind
        onSelectDate={onSelectDate}
      />
    </div>
  );
};

这是将数据保存到变量中的函数。 console.log 只是为了排查问题，无论我点击哪个元素，每次都会返回“StartDatum”的ID

  getData = (id,data) => {
    if (id="StartDatum"){
      Date1 =  data;
      console.log(id);
    } else {
      Date2 = data;
      console.log(id);
    }
    console.log(Date1);
    console.log(Date2);
  }

我尝试了许多不同的方法来更新 Datepicker 的 id，但似乎都没有奏效。任何建议将不胜感激。