时间戳

首页 > 解决方案 > DatePicker onchange 事件未提供更新值

javascript - DatePicker onchange 事件未提供更新值

问题描述

我有一个日期选择器，它显示一个默认值（仅在 api 有值时显示），当我更新它时，onchange 函数不会给出所选值。它给出了来自 api 的初始值。知道如何将更新的值传递给 onchange 函数。

api数据

const apidata = my api

setState({
...state,
formData:{
...apidata,
startDate:moment(apidata.startDate).utc()
}
})

表单组件

<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>

更新功能

const updateFields = (data:any) => { // here I'm getting the already set api value not the changed value
setState({
...state,
formData : {
startDate:data
}
})
}

标签： javascripttypescriptdatepickermomentjsantd

解决方案

如果您不共享最小的可重现示例，则不容易找到该错误。

如果您使用defaultValuefrom antd Datepicker API ，则onChange可以按预期工作。

       <DatePicker
          defaultValue={moment('2015-01-01', 'YYYY-MM-DD')}
          onChange={updateFields}
        />

这是一个小的stackblitz，它使用 antd Datepicker和Form.Item按预期工作。

例如：

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'));

推荐阅读