我是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] 删除。
我来说两句