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

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

{（{values，setFieldValue}）=>(
价格
数量
数量
优惠
优惠
菲那拉蒙特
)}

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

---

我知道这里的问题，我必须使用setFieldValue来更新{values.Amount}。同样，我也必须对{values.FinalAmount}使用setFieldValue，这也适用于价格和数量的变化，因为价格或数量的变化应该反映在金额和FinalAmount中。此外，我必须使用setFieldValue作为折扣更改的最终金额。是否有其他方法可以直接设置{values.Amount}和{values.FinalAmount}的值，而无需在价格、数量和折扣变化时写入setFeildValue。使用value={values.Price*values.Qty}作为Amount应该更新{values.Amount}。

最后，在尝试了各种方法之后，我找到了解决方法。我只需在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>
   )}

{（{values，setFieldValue}）=>(
价格
数量
数量
优惠
优惠
菲那拉蒙特
)}

如果您正在使用

useFormik（）

钩子，并且您希望自己计算字段/输入值，那么只需设置

dirty:true

并传递给钩子即可

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