redux-formのsubmit関数で値が渡されない6.0.5

Question

何らかの理由で、匿名関数を使用してコンポーネントを定義すると、値が送信ハンドラに渡されることはありません。呼ばれ、コンソールは、タイトルフィールドの値を表示しますが、カテゴリの値ではない（e）に提出した場合

class TestForm extends Component { 
    constructor(props) { 
     super(props); 
    } 

    submit(e) { 
     console.log(e); 
    } 

    renderField(field) { 
     return (
      <input {...field.input} type="text" className="form-control" placeholder={field.placeholder} /> 
     ); 
    } 

    render() { 
     const handleSubmit = this.props.handleSubmit; 

     return (
      <form onSubmit={handleSubmit(this.submit)}> 
       <div className="form-group"> 
        <label>Title</label> 
        <Field name="title" 
         placeholder="Title" 
         component={this.renderField} /> 
       </div> 

       <div className="form-group"> 
        <label>Category</label> 
        <Field name="category" 
         placeholder="Category" 
         component={category => (
         <input type="text" className="form-control" {...category}/> 
         ) 
         } /> 
       </div> 

       <button type="submit" className="btn btn-primary">Submit</button> 
      </form> 
     ); 
    } 
} 

：私は、私は以下のような簡単なフォームを作成しReduxのフォームに6.0.5

を使用しています表示されます。

カテゴリフィールドに私の匿名関数に問題がありますか、またはコンポーネントとしてサポートされていない匿名関数ですか？

Answer 1

私は実際にあなたと同じコースに入っていて、問題の内容について投稿したかったのです。 V4からV6への急激な変化があり、コースではV4のレフィックス形式を使用しています。私は最新のものを学ぶのが好きなので、すべてを更新しましたが、それは痛みですが、フォームを実際に保存するという解決策が見つかりました。最初にまず{ connect }を{ reduxForm }とは別に使用する必要があります。さらに、Fieldは存在しません。{ reduxForm, Field }これはV6用です。見なければならない作業コードについては、

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { reduxForm, Field } from 'redux-form'; 
import { createPost } from '../actions/index'; 

const renderInput = field => (
    <div className="form-group"> 
    <label>{field.label}</label> 
    <input className="form-control" {...field.input} type= {field.type}/> 
    </div> 
); 

const renderTextarea = field => (
    <div className="form-group"> 
    <label>{field.label}</label> 
    <textarea className="form-control" {...field.input}/> 
    </div> 
); 


class PostsNew extends Component{ 
    render(){ 
    const { handleSubmit } = this.props; 
    return (
     <form onSubmit={handleSubmit(this.props.createPost)}> 
     <h3>Create A New Post</h3> 

     <Field 
      label="Title" 
      name="title" 
      type="text" 
      component={renderInput} /> 

     <Field 
      label="Categories" 
      name="categories" 
      type="text" 
      component={renderInput} 
     /> 

     <Field 
      label="Content" 
      name="content" 
      component={renderTextarea} 
     /> 

     <button type="submit" className="btn btn-primary">Submit</button> 
     </form> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'PostsNewForm', 
})(connect(null,{ createPost })(PostsNew)); 

これは、正確な質問にマイグレーションガイドがない場合に役立ちます。 v5-v6