Obtenez la valeur du clic sur le bouton dans React Flatpickr

Question

J'ai un composant dans React et un React-Flatpicker joint pour obtenir la valeur de la date. Cependant, après avoir utilisé useRef, la valeur est affichée comme "peut être nulle", et oui, après console.log, le résultat est le même :

<Flatpickr
    ref={fp}
    name="startTime"
    className="py-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
    options={{enableTime: true, noCalendar: true, dateFormat: "H:i",}}
/>

Voici la fonction :

const fp = useRef(null);
function handleSubmitAgenda() {
    console.log(fp?.current?.value);
}

S'il vous plaît, donnez-moi un peu d'inspiration.

Answer 1

Pour obtenir la valeur du composant React Flatpickr lorsque vous cliquez sur le bouton, vous devez utiliser les onChangepropriétés fournies par Flatpickr.

Veuillez consulter la base de code ci-dessous.

import { useState, useRef } from "react";
import Flatpickr from "react-flatpickr";

function YourComponent() {
  const [selectedDateTime, setSelectedDateTime] = useState(null);
  const fp = useRef(null);

  // 处理日期/时间选择变化的函数
  const handleDateTimeChange = (selectedDates) => {
    setSelectedDateTime(selectedDates[0]);
  };

  function handleSubmitAgenda() {
    console.log(selectedDateTime); // 当点击按钮时，这将记录所选的日期/时间
  }

  return (
    <div>
      <Flatpickr
        ref={fp}
        name="startTime"
        className="py-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        options={{
          enableTime: true,
          noCalendar: true,
          dateFormat: "H:i",
        }}
        onChange={handleDateTimeChange} // 在日期/时间选择变化时调用handleDateTimeChange
      />

      <button onClick={handleSubmitAgenda}>提交</button>
    </div>
  );
}

J'espère que cela vous aidera. bonne chance.