英文:
How to get value when click button on react flatpickr?
问题
我在React中有一个组件，并附加了react-flatpicker以获取日期值。但是，在我使用useRef后，它显示值“可能为null”，是的，在console.log之后，结果是相同的：
<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",}}
/>
这是函数：
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:
<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",}}
/>
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>
<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}>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 change
const handleDateTimeChange = (selectedDates) => {
setSelectedDateTime(selectedDates[0]);
};
function handleSubmitAgenda() {
console.log(selectedDateTime); // This will log the selected date/time when the button is clicked
}
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} // Call handleDateTimeChange on date/time selection change
/>
<button onClick={handleSubmitAgenda}>Submit</button>
</div>
);
}
I hope this will be helpful for you.
Best.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论