Redux - 제출 핸들러에서 양식 값을 가져 와서 event.preventDefault()를 호출하는 방법

Question

내가 시도한 것은 Redux-Form이있는 양식의 값을 event.preventDefault()를 사용하여 handleSubmit으로 전달하므로이 양식을 제출해도 URL이 변경되지 않습니다.

react-router 일 가능성이 큽니다. 내가 react-router을 사용하고

//form 
class SampleForm extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() {  
     return (
      <div> 
      <form onSubmit={this.props.handleSubmit}>     
       <Field name="body" component="textarea" /> 
       <button type="submit" className="btn">Save</button> 
      </form> 
      </div> 
     ); 
    } 
} 

//container... 
class Container extends React.Component { 
    handleSubmit(event) {   
     event.preventDefault(); 
     //How can I get the values from SampleForm? 
    } 

    render() { 
     return (
      <div> 
       <SampleForm handleSubmit={this.handleSubmit}/> 
      </div> 
     ); 
    } 
} 

여기 ... 내 시도의 발췌입니다. 이 때문에 양식을 제출하면 제출 된 값으로 URL이 업데이트됩니다.

(내가 react-router를 사용하지 않는 한, 이런 일이 발생하지 않았다 - 나는 단순히 handleSubmit()에서 값을 얻을 수 있습니다.)

어떤 조언을 이해할 수있을 것이다.

Answer 1

그래서 Redux-Form으로 래핑 된 SampleForm 구성 요소가 있습니다. 이 데코 레이팅 된 구성 요소는 처리기 인 컨테이너에서 onSubmit 소품을 전달해야합니다. handleSubmit()을 redux-form의 handleSubmit "middleware"와 충돌하는 소품으로 전달하고 있습니다.

다음과 같이 "handleSubmit"대신에 "onSubmit"을 통과하여 컨테이너 구성 요소를 변경

:

이제

//container... 
class Container extends React.Component { 
    handleSubmit(event) {   
     event.preventDefault(); 
     //How can I get the values from SampleForm? 
    } 

    render() { 
     return (
      <div> 
       <SampleForm onSubmit={this.handleSubmit}/> 
      </div> 
     ); 
    } 
} 

, 컨테이너의 구성 요소가 제대로 인수로 인수 "값"을 받아야하고이어야한다 양식 필드 키/값의 오브젝트. redux-form의 미들웨어 (앞서 언급했듯이)는 당신을 위해 그렇게하기 때문에 event.preventDefault()를 호출 할 필요가 없다. 그래서 그 대신 handleSubmit (이벤트)의

, 이벤트 인수를 변경하려면 "값"아래로 :

handleSubmit(values) {   
    console.log(values); 
}