react数据双向绑定

待我称王封你为后i 2022-04-04 12:38 323阅读 0赞

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}});
              }
              
            }
          });
        },
      },
    };