React antd使用踩坑总结1

1、Form表单里面Item默认值的回填问题

例如：

使用 initialValue 属性回填信息，但是如果这个值开始没有

使用三元运算符写为action?.DemoAddress ? action?.DemoAddress : null，页面默认值就会出现不合法的值，后面的空值要写为undefined。

<Item
          label="演示环境"
          name="demoAddress"
          labelAlign="left"
          initialValue={action?.DemoAddress ? action?.DemoAddress : undefined}
          rules={[{ required: true, message: '请选择演示环境!' }]}
 >

2、DatePicker的默认值，使用时间戳形式

<Item
          label="预约开始时间:"
          name="startTime"
          labelAlign="left"
          initialValue={action?.StartTime ? moment(action?.StartTime) : ''}
          rules={[{ required: true, message: '请选择预约开始时间!' }]}
>
          
<DatePicker showTime style={{ width: '100%' }} placeholder="请选择预约开始时间!" />
</Item>

<DatePicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} picker="month" />



DatePickers的placeholder是英文的，自定义即可



<DatePicker.RangePicker placeholder={['开始日期', '结束日期']} />

时间转化：

后端返回时间类型是：2022-07-27T14:24:01+08:00，前端进行转化：

1）首先写一个转换函数：

// 时间戳转换时间格式
export default function formatDate(time) {
  Date.parse(time)
  var date = new Date(time);
  var YY = date.getFullYear() + '-';
  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  return YY + MM + DD + " " + hh + mm + ss;
}

import formatDate from '@/hooks/setTimeFormat'

formatDate(2022-07-27T14:24:01+08:00)  即可转换

3、Form表单踩坑1：

Form表单结合Modal框使用时，当关闭Modal框时，form表单的内容需要清空，使用form.resetFields()清空即可，但当时组件写完没有起作用，所以经过阅读文档，查阅到另一种方法：

首先在Modal框中加入destroyOnClose属性：

<Modal visible={Visible} destroyOnClose>

然后在Form表单后面加入属性：preserve={false}

当字段被删除时不保留字段值，即可在关闭Modal框后清除form表单的值。

4、Form表单踩坑2：

1）labelCol的使用：是一个对象，可以根据span和pull的比例可以来调整标签布局

2）form表单的input框中，填入默认值，使用initialValue，但是使用后发现，默认值不会随着数据的变化而变化，第一次刷新后不会变化，查阅官方文档，得知：

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。

2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

3. 你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。

所以当数据发生变化时，可以使用form.setFieldsValue来动态更新input框的默认值。

3）确认提交和取消提交时关于rules验证问题：

在点击修改时，在input框中填入内容，触发rules的动态验证，所以导致取消提交时，rules的动态验证仍然存在，解决方法：

在点击取消修改时，可以停止校验即可不在出现rules校验内容。

form.setFields([
      {
        name: 'phone', value:' ',errors: null
      }

])