Question

我是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>

在此表单中，我想基于用户输入的价格和数量来设置“金额”值。为此，我使用了value = {values.Price * values.Qty}，该值在文本框中正确显示了该值，但未在values中设置该值。因此，未正确评估FinalAmount的金额。

我知道这里的问题，我必须使用setFieldValue来更新{values.Amount}。同样，我也必须对set {Values.FinalAmount}使用setFieldValue来更改价格和数量，因为更改价格或数量中的金额应同时反映在金额和最终金额中。另外，我必须在Discount更改时将setFieldValue用于FinalAmount。是否可以通过其他方法直接设置{values.Amount}和{values.FinalAmount}的值，而无需在更改价格，数量和折扣时编写setFeildValue。将value = {values.Price * values.Qty}用作“金额”之类的内容应会更新{values.Amount}。

Answer 1

最后，在尝试了各种方法之后，我得到了解决方案。我只需设置value={values.Amount = values.Price*values.Qty}之类的Amount和FinalAmount内部值属性即可。因此{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>
   )}

Answer 2

如果您正在使用useFormik()挂钩，并且希望自己计算字段/输入值，则只需设置dirty:true并传递到挂钩即可。

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

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

2 个答案: