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

したがって、SampleFormコンポーネントはRedux-Formでラップされています。この装飾されたコンポーネントは、ハンドラであるコンテナからonSubmitプロップを渡す必要があります。 handleSubmit（）を、あなたのためにしようとしているredux-formのhandleSubmit "ミドルウェア"と競合している小道具として渡しています。

は、次のように「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); 
}