如何在formik中基于另一个字段设置一个字段的输入值? [英] How to set input value of one field based on another field in formik?
问题描述
我是ReactJS的新手,并在我的Web应用程序中使用了formik.在表单内部,我必须根据用户在另一个字段中输入的值来设置字段的值.
I am new to ReactJS and using formik in my web application. Inside the form, I have to set the value of a field based on the value entered by the user in another field.
以下是我的表格:
<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的金额.
In this form, I want to set value for Amount based on the price and quantity entered by the user. For this, I have used value={values.Price*values.Qty}, that is showing the value properly in textbox but the value is not set in values.Amount due to which FinalAmount is not being evaluated properly.
我知道这里的问题,我必须使用setFieldValue来更新{values.Amount}.同样,我也必须将setFieldValue用于{values.FinalAmount},并且在Price和Qty的更改上也是如此,因为更改价格或数量中的金额应同时反映在金额和最终金额中.另外,我必须在Discount更改时将setFieldValue用于FinalAmount.是否可以通过其他方法直接设置{values.Amount}和{values.FinalAmount}的值,而无需在更改价格,数量和折扣时编写setFeildValue.将value = {values.Price * values.Qty}用作金额"之类的内容应会更新{values.Amount}.
I know the issue here, I have to use setFieldValue to update the {values.Amount}.Likewise, I had to use setFieldValue for {values.FinalAmount} also and that too on the change of Price and Qty, because change in either price or qty should be reflected in both Amount as well as FinalAmount. Also, I have to use setFieldValue for FinalAmount on change of Discount. Is there any other way through which I can directly set the value for {values.Amount} as well as {values.FinalAmount} without writing setFeildValue on change of Price, Qty and Discount. Something like using value={values.Price*values.Qty} for Amount should update {values.Amount}.
推荐答案
最后,在尝试了各种方法之后,我得到了解决方案.我只是简单地将Amount和FinalAmount内部值属性设置为value={values.Amount = values.Price*values.Qty}
.因此,在不使用setFieldValue的情况下更新了{values.Amount}
字段.结果,基于{values.Amount}
,正确评估了{values.FinalAmount}
.我不知道我们可以像这样直接设置formik值,而无需使用setFieldValue.现在,我的最终形式为:
Finally, after trying various ways, I got the solution for this. I simply set the Amount and FinalAmount inside value attribute like value={values.Amount = values.Price*values.Qty}
. So the {values.Amount}
field was updated without using setFieldValue. As a result, based on {values.Amount}
, {values.FinalAmount}
was evaluated properly. I didn't knew we can set the formik values directly like this without using setFieldValue. Now my final form becomes:
<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>
)}
这篇关于如何在formik中基于另一个字段设置一个字段的输入值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!