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

Question

我是 ReactJS 的新手，在我的网络应用程序中使用 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}，它在文本框中正确显示了值，但由于未评估 FinalAmount，因此未在 values.Amount 中设置该值正确。

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

Answer 1

经过各种尝试，终于找到了解决办法。我只是将 Amount 和 FinalAmount inside value 属性设置为 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>
   )}

Answer 2

如果您正在使用 useFormik() 挂钩，并且您希望自己计算 field/input 值，则只需设置 dirty:true 并传递给挂钩。

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

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

How to set input value of one field based on another field in formik?

reactjs

formik