@orca-fe/antd-plus
Version:
Transformer Container
75 lines • 2.58 kB
JavaScript
/**
* title: 基本使用
* description: 通过 `valueMapping` 和 `triggerMapping` 将组件的值和触发器映射到 `Form.Item` 的 `name` 和 `trigger` 上，实现组件与多个表单字段的绑定。
*/
import React from 'react';
import { Form, Input, Space } from 'antd';
import { FormItemMapping } from "../..";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/** 地址组件 */
var Address = props => {
var province = props.province,
street = props.street,
onStreetChange = props.onStreetChange,
onDistrictChange = props.onDistrictChange,
district = props.district,
onProvinceChange = props.onProvinceChange,
onCityChange = props.onCityChange,
city = props.city;
return /*#__PURE__*/_jsxs(Space, {
children: [/*#__PURE__*/_jsx(Input, {
placeholder: "\u7701",
value: province,
onChange: e => onProvinceChange === null || onProvinceChange === void 0 ? void 0 : onProvinceChange(e.target.value)
}), /*#__PURE__*/_jsx(Input, {
placeholder: "\u5E02",
value: city,
onChange: e => onCityChange === null || onCityChange === void 0 ? void 0 : onCityChange(e.target.value)
}), /*#__PURE__*/_jsx(Input, {
placeholder: "\u533A",
value: district,
onChange: e => onDistrictChange === null || onDistrictChange === void 0 ? void 0 : onDistrictChange(e.target.value)
}), /*#__PURE__*/_jsx(Input, {
placeholder: "\u8857",
value: street,
onChange: e => onStreetChange === null || onStreetChange === void 0 ? void 0 : onStreetChange(e.target.value)
})]
});
};
var Demo1 = () => /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsx(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(FormItemMapping, {
valueMapping: {
province: 'province',
city: 'city',
district: 'district',
street: 'street'
},
triggerMapping: {
onProvinceChange: 'province',
onCityChange: 'city',
onDistrictChange: 'district',
onStreetChange: 'street'
},
children: /*#__PURE__*/_jsx(Address, {})
})
})
})
});
export default Demo1;