使用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)
)