React-redux : redux 폼 프로 시저를 상위 구성 요소로 버블 링하는 방법

Question

그래서 모달 폼을 구현하는 과정에서 목록에 새 사용자를 만들고 편집 할 수있게되었습니다. Modal 내부의 실제 폼이 자체 구성 요소에 포함되도록 설정하여 폼에 initialValues을 쉽게 전달할 수 있도록 설정했습니다. 내가 실행중인 문제는 지금 redux의 handleSubmit 함수를 사용하려고 할 때 .get()이 함수가 아니라는 것을 계속 말하면서 형태 필드 값이 .get() 인 것처럼 보일 수 없다. 이전에이 작품을 보았으므로 내가 뭘 잘못하고 있는지 정확히 알지 못합니다. 여기

render() { 
    const { handleSubmit, pristine, reset, submitting } = this.props; 
    return (
     <form> 
     <div> 
      <Field 
      name="first_name" 
      component={TextField} 
      hintText="First Name" 
      /> 
     </div> 
     <RaisedButton label="Update user" style={{marginRight: "10px"}} disabled={pristine || submitting} onClick={handleSubmit} primary={true} /> 
     </form> 
    ) 
} 

그리고 상위 구성 요소의 렌더링 방법 :

render() { 
    return (
    <Dialog 
        title={this.state.modalTitle} 
        modal={false} 
        open={this.state.userModalOpen} 
        onRequestClose={this.handleClose} 
       > 
        <ManageUserform 
        isEditingUser={this.state.isEditingUser} 
        handleSubmit={this.submit} 
        handleClose={this.handleClose} 
        initialValues={this.state.user}/> 
       </Dialog> 

    ) 
} 

은 가능한 한 짧게 일을 유지하기 위해, 여기에 양식을 포함하는 구성 요소() 메소드를 렌더링

양식을 제출할 때 실행되는 실제 submit() 함수는 다음과 같습니다.

/** 
    * Submit the user form 
    */ 
    submit(formProps) { 

    const user = { 
     first_name: formProps.get('first_name') 
    }; 

    // Are we editing? 
    if(this.state.isEditingUser) { 
     user['_id'] = this.state.user.id; 
     this.props.dispatch(updateUser(user)); 
    } else { 
     // Dispatch action to convert the request to a work order 
     this.props.dispatch(createUser(user)); 
    } 

    // Close the modal 
    this.handleClose(); 
    } 

^문제가있는 곳입니다. 제출할 때 오류가 발생합니다.

Uncaught TypeError: formProps.get is not a function

이전에는 상위 구성 요소에 직접 양식이있을 때 formProps.get() 메서드를 사용할 수 있었지만 이제는 구성 요소 내부에 있기 때문에 부모 구성 요소로 바뀌지 않습니다. 여기에 뭔가 부족한 것이 있습니까?

미리 감사드립니다.

Answer 1

함수 호출 컨텍스트를 변경 했으므로 bind 메서드를 사용하여 호출해야하며 새 값 this을 설정해야합니다. onClick={handleSubmit.bind(this)}을 변경하십시오.

Answer 2

redux 형식을 사용하면 handleSubmit을 실행할 때 구성 요소가 onSubmit을 찾았으므로 구성 요소의 하위 집합을 변경해야합니다. 상위 구성 요소에 대한 업데이트 된 렌더링 메서드 코드는 다음과 같습니다.

render() { 
    return (
    <Dialog 
        title={this.state.modalTitle} 
        modal={false} 
        open={this.state.userModalOpen} 
        onRequestClose={this.handleClose} 
       > 
        <ManageUserform 
        isEditingUser={this.state.isEditingUser} 
        onSubmit={this.submit} 
        handleClose={this.handleClose} 
        initialValues={this.state.user}/> 
       </Dialog> 

    ) 
}