如何根据formik中的另一个字段设置一个字段的输入值?

IT技术 reactjs formik
2021-05-16 15:40:07

我是 ReactJS 的新手,并在我的 Web 应用程序中使用了 formik。在表单内部,我必须根据用户在另一个字段中输入的值来设置一个字段的值。

下面是我的表格:

<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.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.Amount * values.Discount)/100} name="FinalAmount" type="number">
         </Field>
         <Label className="impo_label">FinalAmount</Label>
      </FormGroup>
   </Form>
   )}
</Formik>

在此表单中,我想根据用户输入的价格和数量设置 Amount 的值。为此,我使用了 value={values.Price*values.Qty},即在文本框中正确显示值但未在 values.Amount 中设置该值,因为 FinalAmount 未正确评估。

我知道这里的问题,我必须使用 setFieldValue 来更新 {values.Amount}。同样,我也必须对 {values.FinalAmount} 使用 setFieldValue,而且在价格和数量的变化上也是如此,因为任一价格的变化或数量应同时反映在 Amount 和 FinalAmount 中。另外,我必须在更改折扣时使用 setFieldValue 作为 FinalAmount。有没有其他方法可以直接设置 {values.Amount} 和 {values.FinalAmount} 的值,而无需在更改价格、数量和折扣时写入 setFeildValue。使用 value={values.Price*values.Qty} 作为 Amount 之类的东西应该更新 {values.Amount}。

2个回答

最后,在尝试了各种方法之后,我得到了解决方案。我只是在 value 属性中设置了 Amount 和 FinalAmount,例如value={values.Amount = values.Price*values.Qty}. 所以该{values.Amount}字段是在不使用 setFieldValue 的情况下更新的。结果,基于{values.Amount}{values.FinalAmount}被正确评估。我不知道我们可以像这样直接设置 formik 值而不使用 setFieldValue。现在我的最终形式变成了:

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

如果您正在使用useFormik()钩子,并且您希望自己计算字段/输入值,则所需要做的就是设置dirty:true并传递给钩子。

const formik = useFormik({ initialValues, onSubmit, dirty: true});