antd的组件Form自定义提交的数据格式

caicaicai404

已于 2022-06-30 09:59:50 修改

阅读量6.9k

点赞数 9

分类专栏： antd form react 文章标签：前端

于 2022-06-30 01:31:55 首次发布

本文链接：https://blog.csdn.net/caimingxian401/article/details/125528495

版权

react 同时被 3 个专栏收录

6 篇文章

订阅专栏

antd

2 篇文章

订阅专栏

form

2 篇文章

订阅专栏

本文介绍如何使用Ant Design Form组件时，将select多选框的值转换为逗号分隔字符串，同时switch的值转换为'open'或'close'。通过自定义getValueFromEvent和getValueProps方法实现数据格式转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们做antd form表单提交的时候，像下面这个dome。

没做数据处理前，打印出来的数据如下：

select框多选模式下，提交默认是数组格式。

switch开关表单提交时，默认是布尔值true、false。

现在要求改成（如下图打印）：

1、test字段是用逗号隔开的字符串

2、state字段为true时传"open"，为false时传"close"

实现代码如下：

1、valuePropName：为Form.Item包含的子节点的属性，如Switch 的是 'checked'、input的的属性是value、table的属性是dataSource等

2、getValueFromEvent：在这个方法里将event的值转换成我们想要的数据格式。

3、getValueProps：把处理后元素的值转换成没处理前的数据格式

import { Button, Form, Select, Switch } from 'antd';
import React from 'react';

const App: React.FC = () => {
  const onFinish = (values: any) => {
    console.log('转换后的数据格式：');
    console.log(values);
  };


  /**
   * Form.Item 数组<=>字符串转化
   */
  const ArrayToString = {
    valuePropName: 'value',
    getValueProps: (val: string) => {
      return { value: val ? val.split(',') : [] }
    },
    getValueFromEvent: (e: any) => (e ? e.join(',') : '')
  };

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      onFinish={onFinish}
      autoComplete="off"
    >

      <Form.Item label="平台" name="test" {...ArrayToString}>
        <Select
          style={{ width: '180px' }}
          mode="multiple"
        >
          <Select.Option value={'1'}>安卓</Select.Option>
          <Select.Option value={'2'}>ios</Select.Option>
          <Select.Option value={'3'}>小程序</Select.Option>
        </Select>
      </Form.Item>



      <Form.Item
        label="开关"
        name="state"
        valuePropName="checked"
        initialValue="open"
        getValueProps={value => ({ checked: value === 'open' ? true : false })}
        getValueFromEvent={value => {
          return value ? 'open' : 'close';
        }}>
        <Switch />
      </Form.Item>


      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;

最后就能得到我们想要的数据格式了。

其他相关：