在React中从DatePicker获取日期值的方法如下:
react-datepicker
或者antd
中的DatePicker
组件。import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function MyComponent() {
const [selectedDate, setSelectedDate] = useState(null);
const handleDateChange = (date) => {
setSelectedDate(date);
};
return (
<div>
<DatePicker selected={selectedDate} onChange={handleDateChange} />
</div>
);
}
export default MyComponent;
useState
钩子来创建一个名为selectedDate
的状态变量,并使用setSelectedDate
函数来更新它。DatePicker
组件的selected
属性用于指定当前选中的日期值,我们将其设置为selectedDate
。DatePicker
组件的onChange
属性用于指定日期值改变时的回调函数,我们将其设置为handleDateChange
。handleDateChange
函数中,我们接收一个日期对象作为参数,并将其设置为selectedDate
的新值。通过上述步骤,你就可以在React中从DatePicker获取日期值了。每当用户选择一个日期时,handleDateChange
函数将被调用,并更新selectedDate
的值。你可以根据需要进一步处理这个日期值,比如将其发送到后端进行处理或者在前端展示。
领取专属 10元无门槛券
手把手带您无忧上云