使用 setFieldValue 发送基于按钮点击的不同值

Question

当用户单击 formik 表单中的 Save and Continue 按钮时，我试图在 handleSubmit 回调中发送不同的 requestStatuses 值（即 10），如下所示:

 <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', 的这一行中。 :

我尝试过的东西：

场景一：

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

setFieldValue ('requestStatuses',10,false);

为此我修改了 Save and Continue 按钮如下：

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

已将按钮类型从 submit
更改为 button
定义了一个 onClick 处理程序并调用了一个单独的函数 handleSaveAndContinue

定义 handleSaveAndContinue 如下所示并尝试调用 submitForm 属性但没有任何反应：

const handleSaveAndContinue = () => {

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

 }

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

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

场景二：

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

已将按钮类型从 submit

button

定义了一个 onClick 处理程序并调用了 submitForm 道具 onclick。

这确实会触发 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:

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

收到错误：Uncaught (in promise) TypeError: _ref6 is undefined。调试器显示以下内容：

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

所以您可以做的是将按钮（'Save and Continue' 和 'Submit'）类型都保留为提交，将 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>

使用 setFieldValue 发送基于按钮点击的不同值

Using setFieldValue to send different values based button click

reactjs

formik