Ant Design Form mapPropsToFields 与 onFieldsChange

说说AntDesign的Form
如果只是用纯React来做的话，其实并不会遇到太大的问题，但是问题来了，在Redux+React黄金搭档的今天，那么在使用Form组件的时候你会遇到这个问题。

场景: 修改一组数据时，界面上有两个按钮【更新】【取消】，这是如果修改到一半，忽然不想修改想恢复表单数据到修改前，最直接的方法就是点击取消，刷新Reducer里面的
state为初始state，兴致勃勃的以为界面重新render之后表单空间value会恢复到更新之前，其实—-并不是这样。设置了initialValue只是说明表单初始化的时候，从reducer里面
初始了控件的value，但是，然而并没有将节点空间与redux绑定起来。

1. 问题在哪里

1.1 mapPropsToFields

通过查看文档(之前文档版本对于mapPropsToFields的使用说明貌似并没有这么详细,是真的没有这么明了)

得知需要在Form.create里设置mapPropsToFields就可以实现从redux store中读值出来，然而，没有实例如何看啊。

更多示例参考 rc-form。

这是文档给的跟多答案。参照示例

const NewForm = connect((state) => {
  return {
    formState: {
      email: state.form.email,
    },
  };
})(createForm({
  mapPropsToFields(props) {
    console.log('mapPropsToFields', props);
    return {
      email: props.formState.email,
    };
  },
  onFieldsChange(props, fields) {
    console.log('onFieldsChange', fields);
    props.dispatch({
      type: 'save_fields',
      payload: fields,
    });
  },
})(Form));

完成如下代码

//上方代码已省略
mapPropsToFields(props) {
    // console.log('mapPropsToFields');
    // console.log(props);
    return {
      realname:props.realname,
      password:props.password},
      username:props.username,
      email:{value:props.email},
    };
  },
//下方代码以省略

发现不仅初始值无法显示，而且log输出报错。WTF

1.2 onFieldsChange

当 Form.Item 子节点的值发生改变时触发，可以把对应的值转存到 Redux store
然而

1	Function(props, fields)

如果按照上面示例代码写，一定会中招，他会讲一个[Object object]丢给你Redux store字段值，导致无法正确转存数据到Redux store

文档给出的并没有什么卵用，还是不明白如何用

2. 怎么解决

2.1 mapPropsToFields

文档指出

1	Function(props): Object{ fieldName: Object{ value } }

所以在给fieldName给值的时候，需要传入一个拥有value属性的Object对象
也就是说

1	Function(props): Object{ fieldName: {value:值} }

所以修改后程序运行正常

return {
      realname:{value:props.realname},
      password:{value:props.password},
      username:{value:props.username},
    };

2.2 onFieldsChange

一一对应能够解决

onFieldsChange(props, fields) {
    fields.realname = props.realname;
    fields.password = props.password;
    fields.username = props.username;
    fields.email = props.email;
}

所以说，虽然AntDesign给出的控件看起来还算丰富的，但是文档输出质量一般

好的一点在于Ant Design的官网对于界面模式的讲解还比较好界面模式
对于设计原则【比如管理端的布局原则等】说的简洁明了Ant Design
以上