一、Form操作

  1. 使用mapPropsToFields和onFieldsChange对form数据进行编辑回显操作
  1. //父组件
  3. constructor(props) {
  4.   super();
  5.   this.state = {
  6.     aInfo: props.section.aInfo,    //设置state
  7.   };
  8. }
  10. componentWillReceiveProps(nextProps) {    //componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
  11.   this.setState({
  12.     aInfo: nextProps.section.aInfo,    //给state设置最新的值
  13.   })
  14. }
  16. //将Form变化的Form数据进行state赋值【双向绑定】
  17. handleFormChange = (changedFields) => {
  18.   this.state.aInfo[changedFields.name] = changedFields.value;
  19.   this.setState(({ aInfo }) => ({
  20.     aInfo: { ...aInfo, ...changedFields },
  21.   }));
  22. }
  24. //在render里面进行解构
  25. const { aInfo } = this.state;
  27. //给Form组件传值
  28. <SectionForm 
  29.   aInfo={aInfo}
  30.     onChange={this.handleFormChange} //监听Form数据变化
  31. />
  33. //子组件【Form组件】
  34. Form.create({
  35.     name:'sectionForm',
  36.     onFieldsChange(props, changedFields) {
  37.           //监听Form的值并传值给父组件的onChange
  38.         Object.keys(changedFields).forEach(key=>{
  39.             props.onChange(changedFields[key]);
  40.         })
  41.     },
  42.     mapPropsToFields(props) {
  43.         const { aInfo } = props;    //通过父组件传递过来的props获取到值
  44.         const dataToForm = (obj)=>{
  45.             let formData = {}
  46.             for(let [key,value] of Object.entries(obj)){
  47.                 formData[key] = Form.createFormField({value})    //使用Form.createFormField进行标记【必须】，进行数据回显
  48.             }
  49.             return formData;
  50.         }
  51.         return dataToForm(aInfo);
  52.     }
  53. })(SectionForm);
  1. 监听Form值并扔给reducers
  1. //Form组件
  3. componentWillReceiveProps(nextProps) {
  4.   this.setState({
  5.     aInfo: nextProps.section.aInfo,    //监听props更新设置state
  6.   });
  7. }
  8. //实时监听Form变化
  9. onChange = () => {
  10.   const { dispatch } = this.props;
  11.   const { aInfo: formData } = this.state;
  12.   dispatch({
  13.     type:'section/formData',    //扔给reducers
  14.     payload:{
  15.       formData
  16.     }
  17.   })
  18. }
  19. //绑定监听事件
  20. <Form onChange={this.onChange}></Form>