英文:
How to get value when click button on react flatpickr?
问题
我在React中有一个组件，并附加了react-flatpicker以获取日期值。但是，在我使用useRef后，它显示值“可能为null”，是的，在console.log之后，结果是相同的：
<Flatpickrref={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",}}/>
这是函数：
const fp = useRef(null);function handleSubmitAgenda() {console.log(fp?.current?.value);}
请告诉我关于这个的详细信息。
英文:
I have a component in React and attach react-flatpicker to get date value.
However, after I use useRef, it shows that value is "possibly null" and yes after console.log it is the same result:
<Flatpickrref={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",}}/>
And here is the function:
const fp = useRef(null);function handleSubmitAgenda() {console.log(fp?.current?.value);}
Please enlighten me about this.
答案1
得分: -1
要在单击按钮时从React Flatpickr组件获取值，您需要使用Flatpickr提供的onChange属性。
请查看下面的代码库。
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><Flatpickrref={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}>Submit</button></div>);}
希望这对您有所帮助。祝一切顺利。
英文:
To get the value from the React Flatpickr component when you click a button, you need to use the onChange prop provided by Flatpickr.
Please check the codebase below.
import { useState, useRef } from "react";import Flatpickr from "react-flatpickr";function YourComponent() {const [selectedDateTime, setSelectedDateTime] = useState(null);const fp = useRef(null);// Function to handle the date/time selection changeconst handleDateTimeChange = (selectedDates) => {setSelectedDateTime(selectedDates[0]);};function handleSubmitAgenda() {console.log(selectedDateTime); // This will log the selected date/time when the button is clicked}return (<div><Flatpickrref={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} // Call handleDateTimeChange on date/time selection change/><button onClick={handleSubmitAgenda}>Submit</button></div>);}
I hope this will be helpful for you.
Best.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论