关于antd表单的双向绑定

react的input要进行双向绑定需要定义value和onChange属性来双向绑定，当表单元素过多时就显得麻烦。

预览在线demo

antd的表单提供了Form组件，Form组件提供getFieldDecorator来进行双向绑定

公司使用antd+mobx进行开发，需要将mobx状态绑定到antd的表单上。

通过使用 onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到上层组件或者 Redux、dva 中，更多可参考 rc-form 示例。

官网对于Redux、mobx结合使用的例子很少。下面是我自己在项目中使用mobx和表单的双向绑定

...
const objToForm = (obj)=>{
	let target = {}
	for(let [key,value] of Object.entries(obj)){
	    target[key] = Form.createFormField({value})
	}
	return target
}

const form = Form.create({
   onFieldsChange(props, changedFields) {
 	   //将表单变化的值绑定到store中
       props.masterDatabaseStore.searchFieldsChange(changedFields);
   },
   mapPropsToFields(props) {
       console.log(11111)
       //将store中的值绑定到视图中
       return objToForm(props.masterDatabaseStore.partDetail)
   },
})

@inject('masterDatabaseStore') @form @observer
class MaintainModal extends React.Component{
	render(){
		return (
			...
		)
	}
}

onFieldsChange是在表单值变化时调用，将变化的值绑定到store中;

store中的值如何绑定到表单中呢？
mapPropsToFields方法会将store的值绑定到表单中，注意mapPropsToFields 里面返回的表单域数据必须使用 Form.createFormField 包装。

mapPropsToFields方法什么时候调用？
看rc-form的源码可以看到当我们用@form修饰器语法修饰React组件时，已经修改了组件类的行为:

当修饰的React组件的componentWillReceiveProps生命周期触发时就会调用mapPropsToFields方法将store的值绑定到表单中去。所以我们在改变store中时，一定要保证componentWillReceiveProps触发，否则store虽然变化但是不会反应到表单视图上。（componentWillReceiveProps以后可能会废弃，具体使用还是要看antd）

关于antd表单遇见的一些其他问题可以参考这里