Redux-Form: Input onChange 이후에 Form onSubmit을 트리거하기
Redux-Form을 사용하다가 입력의 onChange 이벤트가 발생할 때 폼의 onSubmit 이벤트를 트리거해야 하는 경우, 몇 가지 방법을 시도할 수 있습니다. 이 블로그 글에서는 이러한 방법들을 살펴보고 효과에 대해 논의하겠습니다.
방법 1: componentWillReceiveProps에서 handleSubmit 사용하기
하나의 가능한 해결책은 RadioForm 컴포넌트의 componentWillReceiveProps 라이프사이클 메서드 내에서 handleSubmit을 호출하는 것입니다. 그러나, 단순히 componentWillReceiveProps 내에서 nextProps.handleSubmit을 호출하는 것은 “Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop.”라는 에러가 발생할 수 있음을 유의해야 합니다.
componentWillReceiveProps(nextProps) {
if (nextProps.dirty && nextProps.valid) {
let doubleDirty = false;
Object.keys(nextProps.fields).forEach(key => {
if (nextProps.fields[key].value !== this.props.fields[key].value) {
doubleDirty = true;
}
});
if (doubleDirty) {
nextProps.handleSubmit();
}
}
}이 방법은 기대한 대로 작동하지 않을 수 있으며, 위에서 언급한 에러가 발생할 수 있습니다. handleSubmit이 올바르게 prop으로 전달되거나 onSubmit 함수로 전달되었는지 확인하는 것이 중요합니다.
방법 2: onChange 핸들러 내에서 submit 호출하기
또 다른 옵션은 입력 컴포넌트의 onChange 핸들러 내에서 직접 submit 함수를 호출하는 것입니다. 그러나, 이 방법은 올바르게 구현되지 않으면 유효성 검사를 건너뛸 수 있습니다.
<input // ...
onChange={(event) => {
radioField.handleChange(event); // redux 상태 업데이트
this.submit({ myField: event.target.value });
}} />이 방법을 사용할 때는 유효성 검사가 건너뛰어질 수 있으므로 주의해야 합니다. 필드 수준에서 유효성 검사를 수행하고, 오류 및 touched 메타 상태에 접근할 수 있도록 해서 예상치 못한 동작을 방지해야 합니다.
방법 3: this.refs를 통해 submit 호출하기
마지막으로, this.refs를 사용하여 폼에서 submit 함수를 호출해볼 수 있습니다. 이 방법은 폼을 제출하는 동작은 유발하지만, redux-form의 기능을 완전히 우회합니다.
<input // ...
onChange={(event) => {
radioField.onChange(event);
this.refs.radioForm.submit();
}} />this.refs.radioForm.submit()을 사용하면 폼 제출이 트리거됩니다만, redux-form 라이브러리에서 제공하는 유효성 검사 메커니즘은 무시됩니다.
결론
마지막으로, redux-form에서 입력의 onChange 이벤트 이후에 폼의 onSubmit 이벤트를 트리거하는 것은 여러 가지 방법을 통해 달성할 수 있습니다. 그러나, 각 방법의 영향과 제한 사항, 즉 가능한 에러, 유효성 검사 건너뛰기, 기능 우회 등을 고려하는 것이 중요합니다. 특정 요구 사항에 가장 적합한 접근 방식을 선택하고 관련된 트레이드오프를 고려해야 합니다.
폼 데이터의 정확성과 무결성을 보장하기 위해 적절한 유효성 검사 메커니즘을 구현하는 것을 기억하세요. redux-form 구현과 원활하게 통합되는 방법을 찾기 위해 계속 실험하고 다양한 솔루션을 탐색하세요.
