formik의 다른 필드를 기반으로 한 필드의 입력 값을 설정하는 방법은 무엇입니까?

맑은

저는 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}를 사용했는데, 이는 텍스트 상자에 값이 제대로 표시되지만 값이 values.Amount에 설정되어 있지 않아 FinalAmount가 제대로 평가되지 않습니다.

여기서 문제를 알고 있으며 {values.Amount}를 업데이트하려면 setFieldValue를 사용해야합니다. 마찬가지로 {values.FinalAmount}에 대해 setFieldValue를 사용해야하고 가격과 수량이 변경 될 때도 마찬가지입니다. 또는 수량은 Amount 및 FinalAmount 모두에 반영되어야합니다. 또한 Discount 변경시 FinalAmount에 setFieldValue를 사용해야합니다. 가격, 수량 및 할인의 변경에 대해 setFeildValue를 작성하지 않고 {values.Amount} 및 {values.FinalAmount}의 값을 직접 설정할 수있는 다른 방법이 있습니까? Amount에 value = {values.Price * values.Qty}를 사용하는 것과 같은 것은 {values.Amount}를 업데이트해야합니다.

맑은

드디어 다양한 방법을 시도한 끝에 이에 대한 해결책을 찾았습니다. 나는 단순히 Amount와 FinalAmount를 value={values.Amount = values.Price*values.Qty}. 따라서 {values.Amount}필드는 setFieldValue를 사용하지 않고 업데이트되었습니다. 기반 결과적으로 {values.Amount}, {values.FinalAmount}제대로 평가 하였다. setFieldValue를 사용하지 않고 이와 같이 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.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리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

다른 필드의 값을 기반으로 한 필드에서 찾고 바꾸는 방법은 무엇입니까?

분류에서Dev

동일한 'ID'를 가진 다른 행을 기반으로 열의 필드를 효율적으로 선택하는 방법은 무엇입니까?

분류에서Dev

Java의 특정 필드 값을 기반으로 Spark RDD를 필터링하는 방법은 무엇입니까?

분류에서Dev

한 모델의 필드 값을 다른 모델의 필드에 할당하는 방법은 무엇입니까?

분류에서Dev

Elasticsearch의 입력 필드를 기반으로 필드의 합계 값을 얻는 방법 (입력 필드와 합계 출력 필드가 다름)

분류에서Dev

SQL : 다른 테이블의 동일한 필드를 기반으로 두 필드를 만드는 방법은 무엇입니까?

분류에서Dev

다른 TextBox의 텍스트 입력을 기반으로 계산 된 필드를 구현하는 방법은 무엇입니까?

분류에서Dev

다른 필드의 내용을 기반으로 파일의 특정 필드를 바꾸는 방법은 무엇입니까?

분류에서Dev

다른 필드의 내용을 기반으로 파일의 특정 필드를 바꾸는 방법은 무엇입니까?

분류에서Dev

다른 mongoid 필드를 기반으로 mongoid 필드의 유효성을 검사하는 방법은 무엇입니까?

분류에서Dev

반응에서 머티리얼 UI로 한 텍스트 필드의 값을 다른 텍스트 필드로 전송하는 방법은 무엇입니까?

분류에서Dev

동일한 행에있는 다른 필드의 내용을 기반으로 행을 반복하고 특정 필드를 쿼리하는 방법은 무엇입니까?

분류에서Dev

PostgreSQL에 행을 삽입 할 때 다른 필드를 기반으로 필드를 자동으로 설정하는 방법은 무엇입니까?

분류에서Dev

필드의 값을 Google Big Query에서 다른 필드로 변환하는 방법은 무엇입니까?

분류에서Dev

Oracle PL / SQL : 동일한 레코드의 ID 필드를 기반으로 문자열 값을 반환하는 방법은 무엇입니까?

분류에서Dev

mongodb 집계의 배열 내부에있는 다른 필드를 기반으로 부모 필드에 조건부로 값을 설정하는 방법은 무엇입니까?

분류에서Dev

R의 다른 열 값을 기반으로 한 열의 값을 필터링하는 방법은 무엇입니까?

분류에서Dev

HTML5에서 동일한 형식의 다른 필드에있는 데이터를 기반으로 입력에 maxlength를 설정하는 방법은 무엇입니까?

분류에서Dev

Symfony의 다른 2 개 필드를 기반으로 양식 필드를 동적으로 수정하는 방법은 무엇입니까?

분류에서Dev

mysql의 한 테이블에서 다른 효과로 동일한 값을 가진 두 필드를 비교하는 방법은 무엇입니까?

분류에서Dev

meanjs를 사용하여 다른 입력 필드의 드롭 다운 필드 값을 바인딩하는 방법은 무엇입니까?

분류에서Dev

Solr의 다른 필드에서 한 필드의 데이터를 사용하는 방법은 무엇입니까?

분류에서Dev

행의 필드 값을 기반으로 값이있는 열을 추가하는 방법은 무엇입니까?

분류에서Dev

mySql의 다른 테이블을 기반으로 필드 값을 업데이트하는 방법은 무엇입니까?

분류에서Dev

다른 sbt 명령을 기반으로 SettingKey의 값을 설정하는 방법은 무엇입니까?

분류에서Dev

다른 열의 값을 기반으로 한 열을 이동하는 방법은 무엇입니까?

분류에서Dev

다른 필드의 값을 바꾸는 방법은 무엇입니까?

분류에서Dev

다른 NumPy 배열의 값을 기반으로 NumPy 배열을 만드는 방법은 무엇입니까?

분류에서Dev

한 페이지에서 입력 필드의 값을 가져 와서 다른 페이지에 인쇄하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    다른 필드의 값을 기반으로 한 필드에서 찾고 바꾸는 방법은 무엇입니까?

  2. 2

    동일한 'ID'를 가진 다른 행을 기반으로 열의 필드를 효율적으로 선택하는 방법은 무엇입니까?

  3. 3

    Java의 특정 필드 값을 기반으로 Spark RDD를 필터링하는 방법은 무엇입니까?

  4. 4

    한 모델의 필드 값을 다른 모델의 필드에 할당하는 방법은 무엇입니까?

  5. 5

    Elasticsearch의 입력 필드를 기반으로 필드의 합계 값을 얻는 방법 (입력 필드와 합계 출력 필드가 다름)

  6. 6

    SQL : 다른 테이블의 동일한 필드를 기반으로 두 필드를 만드는 방법은 무엇입니까?

  7. 7

    다른 TextBox의 텍스트 입력을 기반으로 계산 된 필드를 구현하는 방법은 무엇입니까?

  8. 8

    다른 필드의 내용을 기반으로 파일의 특정 필드를 바꾸는 방법은 무엇입니까?

  9. 9

    다른 필드의 내용을 기반으로 파일의 특정 필드를 바꾸는 방법은 무엇입니까?

  10. 10

    다른 mongoid 필드를 기반으로 mongoid 필드의 유효성을 검사하는 방법은 무엇입니까?

  11. 11

    반응에서 머티리얼 UI로 한 텍스트 필드의 값을 다른 텍스트 필드로 전송하는 방법은 무엇입니까?

  12. 12

    동일한 행에있는 다른 필드의 내용을 기반으로 행을 반복하고 특정 필드를 쿼리하는 방법은 무엇입니까?

  13. 13

    PostgreSQL에 행을 삽입 할 때 다른 필드를 기반으로 필드를 자동으로 설정하는 방법은 무엇입니까?

  14. 14

    필드의 값을 Google Big Query에서 다른 필드로 변환하는 방법은 무엇입니까?

  15. 15

    Oracle PL / SQL : 동일한 레코드의 ID 필드를 기반으로 문자열 값을 반환하는 방법은 무엇입니까?

  16. 16

    mongodb 집계의 배열 내부에있는 다른 필드를 기반으로 부모 필드에 조건부로 값을 설정하는 방법은 무엇입니까?

  17. 17

    R의 다른 열 값을 기반으로 한 열의 값을 필터링하는 방법은 무엇입니까?

  18. 18

    HTML5에서 동일한 형식의 다른 필드에있는 데이터를 기반으로 입력에 maxlength를 설정하는 방법은 무엇입니까?

  19. 19

    Symfony의 다른 2 개 필드를 기반으로 양식 필드를 동적으로 수정하는 방법은 무엇입니까?

  20. 20

    mysql의 한 테이블에서 다른 효과로 동일한 값을 가진 두 필드를 비교하는 방법은 무엇입니까?

  21. 21

    meanjs를 사용하여 다른 입력 필드의 드롭 다운 필드 값을 바인딩하는 방법은 무엇입니까?

  22. 22

    Solr의 다른 필드에서 한 필드의 데이터를 사용하는 방법은 무엇입니까?

  23. 23

    행의 필드 값을 기반으로 값이있는 열을 추가하는 방법은 무엇입니까?

  24. 24

    mySql의 다른 테이블을 기반으로 필드 값을 업데이트하는 방법은 무엇입니까?

  25. 25

    다른 sbt 명령을 기반으로 SettingKey의 값을 설정하는 방법은 무엇입니까?

  26. 26

    다른 열의 값을 기반으로 한 열을 이동하는 방법은 무엇입니까?

  27. 27

    다른 필드의 값을 바꾸는 방법은 무엇입니까?

  28. 28

    다른 NumPy 배열의 값을 기반으로 NumPy 배열을 만드는 방법은 무엇입니까?

  29. 29

    한 페이지에서 입력 필드의 값을 가져 와서 다른 페이지에 인쇄하는 방법은 무엇입니까?

뜨겁다태그

보관