React + Redux : 다중 컴포넌트 양식 제출

Question

입력 필드가있는 컴포넌트 A가 있다고 가정하십시오. 두 번째 구성 요소 B에는 제출 버튼이 있습니다. 두 구성 요소가 직접 연결되어 있지 않습니다 (예 : 2 깊이 트리에서 2 잎)

제출시 입력 값을 가져와야하는 이유는 react + redux 환경에서 어떻게 해결할 수 있습니까?

가장 마음에 들었던 해결책은 반응 컴포넌트의 refs를 redux 상태에 바인딩하는 것이 었습니다. 이 상태에서 입력 값 (state.fieldName.input.value를 통해 액세스)에 대한 참조가 있음을 의미합니다.

mapStateToProps는 상태 및 이에 따른 입력 값에 액세스 할 수있는 함수 인 onClick prop를 반환하고 "불순한"작업을 수행 할 수 있습니다 (예 : 입력 구성 요소와 직접적인 관계가 없음). DB 요청)

그래서 내 코드는 다음과 같이해야한다 :

//components/TestForm.jsx 
class TestForm extends Component { 
    render() { 
     return <FormInput 
        ref={(ref) => this.props.registerFormField(ref)} 
        value=... 
        ... 
       /> 
    } 
} 

//redux/actions/index.js 
const registerFormField = (field) => { 
    return { 
    type: ActionTypes.REGISTER_FORM_FIELD, 
    field: field 
    } 
} 

//redux/reducers/index.js 
const rootReducer = (state = {}, action) => { 
    switch (action.type) { 
    case ActionTypes.REGISTER_FORM_FIELD: 
     var newState = {...state}; 
     newState[action.field.input.name] = action.field.input; 
     return newState 
    default: 
     return state 

    } 
} 

//containers/SubmitButton.js 
const mapStateToProps = (state, ownProps) => { 
    return { 
     text: "Submit", 
     onClick:() => { 
      //do your impure job with state.fieldName.value 
     } 
    } 
} 
const SubmitButton = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(FormSubmitButton) 

//components/FormSubmitButton.jsx 
class FormSubmitButton extends Component { 
    render() { 
     return <button 
        onClick={this.props.onClick} 
       > 
        {this.props.text} 
       </button> 
    } 
} 

간략 REDUX 형태의 문서를 읽고 어쩌면 내가 '(전술 한 바와 같이 두 개의 구성 요소에서 비 관련 바인딩 할 수 없습니다 보인다 m 잘못;))

거기에 있습니까 이 문제를 해결하는 다른 올바른/우아한 해결책?

Answer 1

이 경우 ref을 사용할 필요가 없습니다.

관용적 인 접근 방식은 value 속성을 제공하여 controlled components으로 양식 필드를 만드는 것입니다. 이것은 전역 상태 (mapStateToProps에 매핑 됨) 또는 공통 상위 구성 요소의 상태에서 제공 될 수 있습니다.

또한 입력 변경 사항을 청취해야합니다. 이를 위해 input의 보조 도구 인 onChange을 제공하십시오. 그러면이 처리기는 가져온 접근 방식에 따라 redux 저장소 또는 구성 요소 상태에서 양식 데이터를 변경해야합니다.

이렇게하면 양식 데이터에 액세스 할 수있는 한 반응 애플리케이션에서 제출 버튼 등을 배치하는 위치는 중요하지 않습니다.

---

사용 사례의 실제 예는 have a look at this JSBin입니다. 이것은 ref에 의존하지 않고 양식을 여러 구성 요소로 분리하고 redux 상점에 입력 값을 보관하는 방법을 보여줍니다.