react数据双向绑定

1，page页面

import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import {Link} from 'react-router-dom';
import { connect } from 'dva';

import {
  Radio,
  Input,
  Form,
  Select,Modal,Icon,DatePicker,Button,Upload
} from 'antd';



const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const { Search, TextArea } = Input;


@Form.create()
class Edit extends PureComponent {

//数据双向绑定开始
  state = {inputMsg:''};
  
  getInitialState = ()=>{

  }
  handelChange = (event)=>{
    // console.log('a',event.target.value)
   this.setState({
      inputMsg:event.target.value,
    })
    // console.log('vv',this.state.inputMsg)
  }

  componentDidUpdate() {
    const dictionary=this.props.mapping;
    if (this.state.inputMsg=='') {
      this.setState({
        inputMsg: dictionary.name,
      })
    }
  }

//数据双向绑定结束

  


  addEditShow = ()=>{
    const list=this.props.list;
    const dictionaryDetails=this.props.dictionaryDetails;
    const dictionary=this.props.mapping;
    

    const isNewRecord = this.props.isNewRecord;
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
    


    const inputMsg = this.state.inputMsg;

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };


  
    if(!isNewRecord){
      return (
        <div>
          <div className={styles.addBg}>
            <Link to="list">
              <Button>返回</Button>
            </Link>
            <Form onSubmit={this.handleSubmit}>
              <table>
                <tbody className={styles.editTable}>
                <tr>
                  <td>名称</td>
                  <td name="name">
                    <FormItem>
                      {getFieldDecorator('name', {
                        rules: [{message: '请输入名称!' }],
                        initialValue :inputMsg
                      })(
                        <Input  placeholder="名称" onChange={this.handelChange} />
                      )}
                    </FormItem>
                  </td>

                  <td>显示</td>
                  <td>
                    <FormItem>
                      {getFieldDecorator('value', {
                        rules: [{message: '请输入显示!' }],
                        initialValue : inputMsg
                      })(
                        <Input  placeholder="显示" />
                      )}
                    </FormItem>
                  </td>
                </tr>
                </tbody>
              </table>
              <Button type="primary" htmlType="submit">
                {isNewRecord===false?'更新':'添加'}
              </Button>
            </Form>

          </div>
        </div>
      )
    }else {
      return (
        <div>
          <div className={styles.addBg}>

            <Form onSubmit={this.handleSubmit}>
              <table>
                <tbody className={styles.editTable}>
                <tr>
                  <td>名称</td>
                  <td name="name">
                    <FormItem>
                      {getFieldDecorator('name', {
                        rules: [{message: '请输入名称!' }],
                        initialValue :inputMsg
                      })(
                        <Input  placeholder="名称" onChange={this.handelChange}/>
                      )}
                    </FormItem>
                  </td>

                  <td>显示</td>
                  <td>
                    <FormItem>
                      {getFieldDecorator('value', {
                        rules: [{message: '请输入显示!' }],
                        initialValue :inputMsg

                      })(
                        <Input  placeholder="显示" />
                      )}
                    </FormItem>
                  </td>

                </tr>
                </tbody>
              </table>
              <Link to="list">
                <Button>返回</Button>
              </Link>
              <Button type="primary" htmlType="submit">
                {isNewRecord===false?'更新':'添加'}
              </Button>
            </Form>

          </div>
        </div>
      )
    }
  }
  render() {
    return(
      <div>
        {this.addEditShow()}
      </div>
    )
  }
}
function mapStateToProps(state) {
  return {...state.dictionary};
}
function mapPropsToFields(props) {
  return {};

}
export default connect(mapStateToProps)(Form.create({mapPropsToFields})(Edit));

2，models页面

import { routerRedux } from 'dva/router';
import { message } from 'antd';

export default {
  namespace: 'dictionary',

  state: {
    dictionaryList:[],
    dictionaryDetails:[],
    modalVisible:false,
    total:1,
    typesList:[],
    list:[],
    dictionary_id:'',
    dictionary_type:[],
    isNewRecord:true,
    superiorList:[],
    mapping:[],
  },

  effects: {
    // 双向数据绑定
    * setShowDictionary({ payload }, { call, put }) {
      yield put({
        type: 'showDictionary',
        payload: {
          mapping: payload,
        },
      });
    },

  },

  reducers: {
    //数据双向绑定
    showDictionary(state, { payload }) {
      return {
        ...state,
        ...payload,

      };
    },
    //数据双向绑定

   
    isNewRecordSuccess(state, action) {
      return { ...state, ...action.payload,
        isNewRecord:true,
        list:[],
        dictionary_id:'',
        dictionary_type:[],};
    },

  },

  subscriptions: {
    setup({ history,dispatch}) {
      return history.listen(({ pathname, search }) => {
     
        if (pathname === '/SetUp/dictionary/edit') {
          const {location} = history;
          const {query} = location;
          dispatch({type:'isNewRecordSuccess'});
          if(typeof query.id =="undefined"){
            dispatch({type:'updateDictionary',payload:{...query}});
          }else {
            dispatch({type:'edit',payload:{...query}});
          }
          
        }
      });
    },
  },
};