antd的联级选择器异步调⽤编辑回显_Antdv3Form实现动态添
加表单项及数据回显...
0、需求
Form表单需要有新增和编辑表单项的功能，编辑即需要有表单有数据回显的功能。
环境：
react：16.13.1；
Antd 3.x。
⼀、创建表单
1. create
这是⼀个⾼阶函数，传⼊的是react组件，返回⼀个新的react组件，在函数内部会对传⼊组件进⾏改造。
经 ate() 包装过的组件会⾃带 this.props.form 属性。
2. 表单数据绑定
getFieldDecorator(id, options)
⽤于和表单进⾏双向绑定
{getFieldDecorator('searchName')(
)}
复制代码
3. 渲染查询表单的查询条件
render
4. 获取查询条件的值
form.validateFields / validateFieldsAndScroll
校验并获取⼀组输⼊域的值与 Error，若 fieldNames 参数为空，则校验全部组件
const { form } = this.props;
// 获取并检查表单数据
form.validateFields((err, fieldsValue) => {
if (err) return;
const { searchName = '' } = fieldsValue;
});
复制代码
⼆、实现动态表单
1. 效果图：
点击 + 后，
增加两条表单项后，出现删除icon。
2. 实现add和remove⽅法。
其中的 keys 是唯⼀值，官⽅demo中使⽤的 id++，这⾥改写了个random值。
function add(props) {
const { form } = props;
// can use data-binding to get
const keys = FieldValue('keys');
const nextKeys = keys && at(Math.floor(Math.random() * 1000) + 1); // can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: nextKeys,
});
}
const { form } = props;
// can use data-binding to get
const keys = FieldValue('keys');
// We need at least one item
if (keys && keys.length === 1) {
return;
}
form.setFieldsValue({
keys: keys.filter(key => key !== k),
});
}
复制代码
3. 从上层组件获取数据
通过使⽤ onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到上层组件或者 Redux、dva 中。onFieldsChange： 当 Form.Item ⼦节点的值发⽣改变时触发；
mapPropsToFields：把⽗组件的属性映射到表单项上。
mapPropsToFields ⾥⾯返回的表单域数据必须使⽤ ateFormField 包装。
如下代码中，mapPropsToFields 中 return 的字段 key 名 与 render 中 getFieldDecorator 所包含的id名⼀⼀对应，如例⼦中的"username”、”keys”。
const CustomForm = ate({
name: 'global_state',
onFieldsChange(props, changedFields, allFields) {
},
mapPropsToFields(props) {
return {
username: ateFormField({
...props.username,
value: props.username.value,
}),
keys: ateFormField({
...props.keys,
value: props.keys && props.keys.value,
names: props.names && props.names.map(k => ( ateFormField({
.
..props.names,
value: k && k.value,
})
)),
phones: props.phones && props.phones.map(k => ( ateFormField({
...props.phones,
value: k && k.value,
})
)),
};
},
onValuesChange(props, changedValues, allValues) { console.log(changedValues);
},
})(props => {
const { getFieldDecorator, getFieldValue } = props.form; getFieldDecorator('keys', { initialValue: [] });
const keys = getFieldValue('keys') || [];
const addItems = keys && keys.map((k, index) => (
label="姓名"
required={false}
key={k}
>
{getFieldDecorator(`names[${index}]`, { validateTrigger: ['onChange', 'onBlur'],
rules: [
{
whitespace: true,
},
],
label="⼿机号码"
required={false}
key={k}
>
{getFieldDecorator(`phones[${index}]`, {
onblur和blur的区别validateTrigger: ['onChange', 'onBlur'],
rules: [
{
whitespace: true,
},
],
})()}
{keys.length > 1 ? (
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => remove(props, k)}
/>
)
: null}
));
return (
onSubmit={HandleSubmit}
gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}
style={{ marginBottom: 0 }}
>
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Username is required!' }], })()}
添加⼀条信息
add(props)} />
{ addItems}
);
});
复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。