Using setFieldValue to send different values based button click-CodePudding

I am trying to send a different value of requestStatuses (i.e. 10) in the handleSubmit callback when a user clicks Save and Continue button which is in the formik form as shown below:

 <div className="form-field">
         <Button size="large" 
                variant="contained" 
                color="primary"  
                style={{marginLeft: '5px'}} 
                type="submit">
                Save & Continue
        </Button>
     </div>

FYI: When a user hits Submit button, I want to keep the value of requestStatuses as 6 which is in this line of the code props.SimpleRequest && props.SimpleRequest.statusId || '6',.:

Things that I have tried:

Scenario 1:

I was planning of using setFieldValue of formik to change the value to 10 like this

setFieldValue ('requestStatuses',10,false);

and for this I modified the Save and Continue button as follows:

           <Button size="large" 
                    variant="contained" 
                    color="primary"  
                    style={{marginLeft: '5px'}} 
                    type="button"
                    onClick={handleSaveAndContinue}>
                    Save & Continue
            </Button>

Changed the type of button to button from submit
Defined an onClick handler and called a separate function handleSaveAndContinue

Defined handleSaveAndContinue like following and tried to call submitForm prop but nothing happens:

const handleSaveAndContinue = () => {

   setFieldValue ('requestStatuses',10,false);
   props.submitForm;

 }

In this case I did try to include setFieldValue as second parameter in handleSubmit like following:

 handleSubmit(values,{setFieldValue} {props, resetForm, setErrors, setSubmitting}) {
        props.handleSubmit(values)
        setSubmitting(false)
    },

Scenario 2:

 <Button size="large" 
                    variant="contained" 
                    color="primary"  
                    style={{marginLeft: '5px'}} 
                    type="button"
                    onClick={props.submitForm}>
                    Save & Continue
            </Button>

Changed the type of button to button from submit
Defined an onClick handler and called submitForm props onclick.

This does trigger the handleSubmit callback but I don't understand where to define setFieldValue ('requestStatuses',10,false); in this case.

Am I proceeding with the usage of setFieldValue correctly to achieve my goal?

Minimal Code of Child component with relavent Formik form information:

  const SimpleRequestForm = (props) => {

    const {values, setFieldValue, touched, errors, isSubmitting, handleReset, handleChange} = 
     props;
    const growl = React.createRef()
  

    return (
        <div>
           
            <div id="formDiv">
                <Growl ref={growl}/>
                <Form className="form-column-3">
                <div className="SimpleRequest-form">                    
                            

                            <div className="form-field">
                                <CustomSelectField name="requestStatuses" disabled type="select"  placeholder="Status"/>
                            </div>
                            <div className="form-field">
                                <CustomSelectField name="requestPrioritieses" type="select" value='Normal'  placeholder="Priority"/>
                            </div>
                            <div className="form-field">
                                <CustomSelectField name="assignees" type="select"  placeholder="Assignee"/>
                            </div>
                            <div className="form-field">
                                <Button size="large" variant="contained" color="primary"  style={{marginLeft: '5px'}} type="submit">Save & Continue</Button>
                            </div>
                            
                    </div>


                    <div className="btn-group-right">
                        <Button size="large" variant="contained" color="primary"
                                type="submit">Submit</Button>
                        <Button size="large" variant="contained" color="primary" onClick={handleReset}
                                style={{marginLeft: '5px'}} type="button">Reset</Button>
                        <Button size="large" variant="contained" color="primary" onClick={props.onCancel}
                                style={{marginLeft: '5px'}} type="button">Cancel</Button>       
                      
                       
                    </div>
                </Form>
            </div>
        </div>
    )

     };

     export const SimpleRequestEnhancedForm = withFormik(
    
    
    
    {

        
    mapPropsToValues: props => {

              
        
        return {
            requestId: props.SimpleRequest && props.SimpleRequest.requestId || '',
            requestStatuses: props.SimpleRequest && props.SimpleRequest.statusId || '6',
            requestPrioritieses: props.SimpleRequest && props.SimpleRequest.priorityId || '3',
            assignees: props.SimpleRequest && props.SimpleRequest.assigneeId || '',
                     
        }
    },
    validationSchema:validationSchema,
    handleSubmit(values, {props, resetForm, setErrors, setSubmitting}) {
          
        props.handleSubmit(values)
        setSubmitting(false)
    },
    setFieldValue(field, value, shouldVal) {
        console.log('In setFieldValue')
    },

    displayName: 'Simple Request Form',
      })(SimpleRequestForm)

Testing Results based on comment:

My function:

const handleSaveAndContinue = () => {

   setFieldValue ('requestStatuses',10,false);
   props.submitForm();

 }

My Button:

<Button size="large" 
                    variant="contained" 
                    color="primary"  
                    style={{marginLeft: '5px'}} 
                    type="button"
                    onClick={handleSaveAndContinue}>
                    Save & Continue
            </Button>

My handleSubmit:

handleSubmit(values,{setFieldValue}, {props, resetForm, setErrors, setSubmitting}) {
        props.handleSubmit(values)
        props.setFieldValue()
        setSubmitting(false)
    },

Error Received : Uncaught (in promise) TypeError: _ref6 is undefined. Debugger shows the following:

handleSubmit: function handleSubmit(values, _ref5, _ref6) {
    var setFieldValue = _ref5.setFieldValue;
    var props = _ref6.props,
        resetForm = _ref6.resetForm,
        setErrors = _ref6.setErrors,
        setSubmitting = _ref6.setSubmitting;
  
    props.handleSubmit(values); 
    props.setFieldValue();
    setSubmitting(false);
  },

CodePudding user response：

so what you can do is to keep both of button ('Save and Continue' and 'Submit') types as submit, attach an onClick handler to setFieldValue modifying the values based off of the button that was clicked!

<button
    size="large"
    variant="contained"
    color="primary"
    type="submit"
    onClick={() => {
        props.setFieldValue("requestStatuses", 6, false);
    }}
>
Submit
</button>

and

<button
    size="large"
    variant="contained"
    color="primary"
    style={{ marginLeft: "5px" }}
    type="submit"
    onClick={() => {
        props.setFieldValue("requestStatuses", 10, false);
    }}
>
Save & Continue
</button>