Tengo un selector de fecha y muestra un valor predeterminado (solo se muestra si la API tiene un valor), cuando lo actualizo, la función de cambio no proporciona el valor seleccionado . da el valor inicial que proviene de la API. alguna idea de cómo puedo obtener el valor actualizado para cambiar la función.
datos api
const apidata = my api setState({ ...state, formData:{ ...apidata, startDate:moment(apidata.startDate).utc() } })componente de formulario
<Form name="update form" initialValues={state.formData} autoComplete="off" form={form} > <Form.Item label="Start Date" name="startDate" rules={[{ required: true, message: "Please enter value!!!!!" }]} > <DatePicker value={state.formData?.startDate} onChange={(date: any)=>updateFields(date)} /> </Form.Item> </Form>función de actualización
const updateFields = (data:any) => { // here I'm getting the already set api value not the changed value setState({ ...state, formData : { startDate:data } }) }El error no es fácil de encontrar si no comparte un ejemplo reproducible mínimo .
Si usa el defaultValue de antd Datepicker API, onChange funciona como se esperaba.
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} onChange={updateFields} />Aquí hay un pequeño stackblitz que funciona como se esperaba usando antd Datepicker y Form.Item .
P.ej:
import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Form, DatePicker } from 'antd'; import moment from 'moment'; const Demo = () => { const [form] = Form.useForm(); function updateFields(date, dateString) { console.log(date, dateString); } return ( <Form form={form} name="control-hooks"> <Form.Item name="DatePicker"> <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} onChange={updateFields} /> </Form.Item> </Form> ); }; ReactDOM.render(<Demo />, document.getElementById('container'));