且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在formik中基于另一个字段设置一个字段的输入值?

更新时间:2022-12-09 15:10:10

最后,在尝试了各种方法之后,我得到了解决方案.我只是简单地将Amount和FinalAmount内部值属性设置为value={values.Amount = values.Price*values.Qty}.因此,在不使用setFieldValue的情况下更新了{values.Amount}字段.结果,基于{values.Amount},正确评估了{values.FinalAmount}.我不知道我们可以像这样直接设置formik值,而无需使用setFieldValue.现在,我的最终形式为:

Finally, after trying various ways, I got the solution for this. I simply set the Amount and FinalAmount inside value attribute like value={values.Amount = values.Price*values.Qty}. So the {values.Amount} field was updated without using setFieldValue. As a result, based on {values.Amount}, {values.FinalAmount} was evaluated properly. I didn't knew we can set the formik values directly like this without using setFieldValue. Now my final form becomes:

<Formik
   initialValues={this.state.data}
   enableReinitialize={true}
   onSubmit={this.formSubmit} >
   {({ values, setFieldValue }) => (
   <Form>
      <FormGroup>
         <Field className="form-control" name="Price" type="number">
         </Field>
         <Label className="impo_label">Price</Label>
      </FormGroup>
      <FormGroup>
         <Field className="form-control" name="Qty" type="number">
         </Field>
         <Label className="impo_label">Qty</Label>
      </FormGroup>
      <FormGroup>
         <Field className="form-control" value={values.Amount = values.Price*values.Qty} name="Amount" type="number">
         </Field>
         <Label className="impo_label">Amount</Label>
      </FormGroup>
      <FormGroup>
         <Field className="form-control" name="Discount" type="number">
         </Field>
         <Label className="impo_label">Discount</Label>
      </FormGroup>
      <FormGroup>
         <Field className="form-control" name="Discount" type="number">
         </Field>
         <Label className="impo_label">Discount</Label>
      </FormGroup>
      <FormGroup>
         <Field className="form-control" value={values.FinalAmount = (values.Amount * values.Discount)/100} name="FinalAmount" type="number">
         </Field>
         <Label className="impo_label">FinalAmount</Label>
      </FormGroup>
   </Form>
   )}