Как установить входное значение одного поля на основе другого поля в formik? - PullRequest
Новая
       6

Как установить входное значение одного поля на основе другого поля в formik?

2 голосов
/ 21 апреля 2020

Я новичок в 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>

В этой форме я хотите установить значение для суммы на основе цены и количества, введенного пользователем. Для этого я использовал value = {values.Price * values.Qty}, который правильно показывает значение в текстовом поле, но значение не задано в values.Amount, из-за которого FinalAmount не оценивается должным образом.

Я знаю проблему здесь, я должен использовать setFieldValue для обновления {values.Amount}. Аналогично, мне также пришлось использовать setFieldValue для {values.FinalAmount} и то же самое при изменении Price и Qty, потому что изменение в либо цена, либо количество должно быть отражено как в сумме, так и в финальной сумме. Кроме того, я должен использовать setFieldValue для FinalAmount при изменении скидки. Есть ли другой способ, с помощью которого я могу напрямую установить значение для {values.Amount}, а также {values.FinalAmount} без записи setFeildValue при изменении цены, кол-во и скидки. Что-то вроде использования value = {values.Price * values.Qty} для Amount должно обновить {values.Amount}.

1 Ответ

1 голос
/ 22 апреля 2020

Наконец, попробовав разные способы, я нашел решение для этого. Я просто устанавливаю атрибут 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>
   )}
...