redux-form onChange f1 + f2 = f3

时间:2018-06-10 18:42:43

标签: react-redux redux-form

使用redux表单来处理更新表单,一切正常。 但现在我需要在另外两个字段的onChange事件上计算和传播第3和第4个字段:

onfof f1,f2: F3 = F1 + F2 F4 = F1 * F2

我花了好几个小时没有成功搜索,非常感谢redux-forms特有的帮助!

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Field,reduxForm,formValueSelector,getFormValues} from 'redux-form';
import {upsertContract,getContract,getSchedules,getSchedule,calculatePayment} from '../../store/actions';

class ContractDet extends Component {
  calculatePayment=(item)=>{
    this.props.calculatePayment(item);
    //this.props.getSchedule(this.props.schedules.amt,+item.id);
  }

  onSubmit(values){
    this.props.upsertContract(values);
    toast.success('Saved Contract');
  }


  render (){
    const { handleSubmit,handleChange,change,values}=this.props;
    const item=this.props.initialValues || this.props.contract; 

    if (_.isEmpty(item)) return(<div></div>);

    return (
      <span>
      <Form
        onSubmit={handleSubmit(this.onSubmit.bind(this))}
      >
          <Row>
            <Col>
              <Button color="primary">Save</Button>
            </Col>
         </Row>
              <Row>
                <Field
                  name='f1'
                  label='Field1'
                  component={renderColField}
                />
                <Field
                  name='f2'
                  label='f2'
                  component={renderColField}
                  onChange={(event,newValue,previousValue)=>{
                    //this is the closest i've come, but I can't get f1 value
                    change('f3',newValue)
                  }}
                />

                <Field
                  name='f3'
                  label='Field3'
                  component={renderColField}
                  {...currencyMask}
                  xs='3'
                />
                <Field
                  name='f4'
                  label='f4'
                  component={renderColField}
                  {...currencyMask}
                />
              </Row>
        </span>
      )
    }
  }

function validate(values){}

function mapStateToProps(state,ownProps){
    const id=ownProps.id;
    const contract=state.contracts[id] || {};

    return {
      initialValues:state.contracts[id] || {},
      contract,
      idContract:id
    };
}

export default connect(mapStateToProps,{upsertContract,getContract,getSchedules,getSchedule})(
    reduxForm({
      form:'ContractDet',
      enableReinitialize:true,
      validate
    })(ContractDet)
)

0 个答案:

没有答案