如何在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>

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

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

阳光明媚

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在django admin中基于另一个字段的查找设置字段值?

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

如何在查询中添加基于另一个字段的字段

计算输入的值并将结果设置在另一个字段中

一个字段基于另一个字段的求和

如何在反应中根据另一个字段更新一个字段?

在PostgreSQL中插入行时,如何基于另一个字段自动设置一个字段?

将setFieldValue用于一个字段,基于另一个字段的值

基于Jackson中另一个字段值的条件字段要求?

如何在访问中将表中的一个字段设置为等于表中的另一个字段

在Redux表单中基于另一个字段验证一个字段

在一个字段中输入数据并自动更新另一个字段

如何在另一个字段中标记一个字段中的重复值

根据另一个字段的值在MongoDB中投影一个字段

检查一个字段的值是否在另一个字段中

如何读取名称在另一个字段中的行字段的值

如何使用 FilterUserMixin 过滤 Django 中的一个字段或另一个字段

使用外键基于另一个字段中的值来限制一个字段中允许的值

如何使用javascript将一个字段输入值复制到另一个字段输入

当您在另一个字段中输入值时如何更新表单字段

Blazor在一个字段中设置DateTime值会更新另一个字段中的DateTime值

我如何通过另一个字段模型设置值

根据在另一个字段中输入的值自动填充访问中的一个字段

SQL:基于另一个字段的值的条件字段输出

基于另一个字段值的猫鼬隐藏/显示字段

如何在同一表的另一个字段上填充一个字段的值

如何在弹性搜索中查询大于和小于另一个字段的字段值?

如何使用XQuery将一个字段的值设置为另一个字段

试图基于一个字段获取DateDiff并更新另一个字段