@orca-fe/antd-plus
Version:
Transformer Container
48 lines (47 loc) • 1.63 kB
JavaScript
/**
* title: FormItemMappingValue
* description: 这个 Demo 用了一个新组件，展示 `FormItemMappingValue` 和 `FormItemMapping` 的差异
*/
import React from 'react';
import { Form } from 'antd';
import { FormItemMappingValue } from "../..";
import AddressFormComp from "./AddressFormComp";
// 地址展示组件，该组件只接收一个 value 属性
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
var AddressDisplay = props => {
var value = props.value;
return /*#__PURE__*/_jsxs("div", {
children: [value === null || value === void 0 ? void 0 : value.province, value === null || value === void 0 ? void 0 : value.city, value === null || value === void 0 ? void 0 : value.district, value === null || value === void 0 ? void 0 : value.street]
});
};
var Demo2 = () => /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsxs(Form, {
initialValues: {
province: '广东省',
city: '深圳市',
district: '南山区',
street: '科技园',
areaCode: '0755',
number: '12345678',
firstName: '张',
lastName: '三'
},
onValuesChange: (_, allValue) => {
console.warn(allValue);
},
children: [/*#__PURE__*/_jsx(Form.Item, {
label: "\u5730\u5740",
children: /*#__PURE__*/_jsx(AddressFormComp, {})
}), /*#__PURE__*/_jsx(FormItemMappingValue, {
valueMapping: {
province: 'province',
city: 'city',
district: 'district',
street: 'street'
},
children: /*#__PURE__*/_jsx(AddressDisplay, {})
})]
})
});
export default Demo2;