使用 setFieldValue 根据按钮单击发送不同的值

Question

当用户单击位于的 Save andContinue 按钮时，我尝试在 handleSubmit 回调中发送不同的 requestStatuses 值（即 10） formik 表单如下所示：

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

仅供参考：当用户点击 Submit 按钮时，我想将 requestStatuses 的值保留为 6 ，其中这行代码props.SimpleRequest && props.SimpleRequest.statusId || '6',.:

我尝试过的事情：

场景 1：

我计划使用 formik 的 setFieldValue 来更改像这样将值设置为10

setFieldValue ('requestStatuses',10,false);

，为此我修改了保存并继续按钮，如下所示：

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

1. 将按钮类型更改为按钮来自提交

2. 定义了 onClick 处理程序并调用了单独的函数 handleSaveAndContinue

3. 定义了 handleSaveAndContinue 如下，并尝试调用 SubmitForm prop 但没有任何反应：

   const handleSaveAndContinue = () =>; {
   
      setFieldValue('requestStatuses',10,false);
      props.submitForm；
   
    }    
   

在这种情况下，我确实尝试将setFieldValue作为第二个参数包含在handleSubmit中，例如以下：

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

场景 2：

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

1. 将按钮类型从 submit 更改为 button
2. 定义 onClick 处理程序并调用 submitForm 属性单击。

这确实会触发 handleSubmit 回调，但我不明白在这种情况下在哪里定义 setFieldValue ('requestStatuses',10,false); 。

我是否正确使用 setFieldValue 来实现我的目标？

带有相关Formik表单信息的子组件的最小代码：

  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)

基于评论的测试结果：

我的功能：

const handleSaveAndContinue = () => {

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

 }

我的按钮：

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

我的handleSubmit< /code>：

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

收到错误：未捕获（承诺中）TypeError：_ref6 未定义。调试器显示以下内容：

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

Answer 1

因此，您可以做的是将两个按钮（“保存并继续”和“提交”）类型保留为提交，将 onClick 处理程序附加到 setFieldValue，根据单击的按钮修改值！

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

和

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