다른 필드를 기준으로 하나의 필드를 확인하십시오.

Question

저는 redux-form을 사용하고 있으며, 구성 요소에는 FieldArray이 여러 개 있습니다. FieldArray 컴포넌트 중 하나는 스크린 샷과 같은 테이블을 생성합니다. 여기서 각 행은 확인란을 포함하여 Field 구성 요소입니다. 내가 달성하고자하는 것은 checkbox 해당 행의 구성 요소가 선택되면 price 필드 만 입력해야한다는 것입니다.

나는 docs에 설명 된대로 validate.js를 사용하여이 문제를 해결하려고했으나 이후,이 구성 요소로 구조를 가지고 :

내 SecondComponent 내가 fruitsList 반복하고 있어요에서

<FirstComponent> 
<FieldArray 
    component={SecondComponent} 
    name="options" 
    fruits={fruitsList} 
/> 
</FirstComponent> 

길이는 1보다 큰 경우 ThirdComponent을 렌더링합니다. 이 구성 요소는 스크린 샷에 표시된 과일 목록을 생성합니다. 어느 정도 중첩되어 있으면 값으로 확인하면 성능 지연이 많아 화면이 고정되어 ThirdComponent이 렌더링 될 때까지 고정됩니다. 각 구성 요소에는 Fields 비트가 있으므로 쉽게 병합 할 수 없습니다. 우아한 방법으로 이것을 해결하는 더 쉬운 방법은 도움이 될 것입니다. 검증하기위한 논리는 다음과 같다 :

props.fruitsList.map((fruit, index) => { 
     const isChecked = values.getIn(['fruit', index, 'checked']) 
     if (isChecked) { 
     const price = values.getIn(['fruit', index, 'price']) 
     if (price === undefined || price.length === 0) { 
      errors.fruits[index] = { price: l('FORM->REQUIRED_FIELD') } 
     } 

     } 
     return errors 
    }) 

Answer 1

동기 검증 함수 형태에 모든 값이 주어진다. 따라서 확인란이 양식 값이라고 가정하면 필요한 모든 정보를 얻을 수 있습니다.

function validate(values) { 
    const errors = {} 
    errors.fruits = values.fruits.map(fruit => { 
    const fruitErrors = {} 
    if (fruit.checked) { // only do fruit validation if it's checked 
     if (!fruit.price) { 
     fruitErrors.price = 'Required' // Bad user!! 
     } 
    } 
    return fruitErrors 
    }) 
    return errors 
} 

... 

MyGroceryForm = reduxForm({ 
    form: 'groceries', 
    validate 
})(MyGroceryForm)