React Js 2つのReact Reduxフィールドから同じ関数をどのように呼び出すのですか？

Question

Reactが最初にレンダリングされるときに、タイトルとコンテンツの両方のフィールドに対してコンポーネントメソッドが呼び出されます。ただし、Titleフィールドの追加入力変更ではrenderFieldメソッドが呼び出されますが、Contentフィールドではそうではありません。これはコンソールログに反映され、最初のコンポーネントの読み込みが2つの「入力が変更されました」が生成され、タイトルの追加の変更では「入力の変更」が表示されますが、コンテンツフィールドが変更されると、どうしたの？

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 

class PostNew extends Component { 

    renderField(field) { 
     console.log('input changed') 
     return(
      <div> 
       <label>{field.label}</label> 
       <input 
        type="text" 
        {...field.input} 
       /> 
      </div> 
     ); 
    } 

    render() { 
     return(
      <form> 
       <Field 
        label="Title" 
        name="title" 
        component={this.renderField} 
       /> 
       <Field 
        label="Content" 
        name="content" 
        component={this.renderField} 
       /> 
      </form> 
     ) 
    } 
} 


export default reduxForm({ 
    form: 'PostsNewForm' // form property is the name of the form 
})(PostNew); 

Answer 1

私は問題を再現できました。問題は、還元型はプラグアンドプレイだけではないということです。次のようにルートレデューサーに追加する必要があります。

//src/reducers/index.js 

import { combineReducers } from 'redux'; 
import {reducer as form} from 'redux-form'; 

const rootReducer = combineReducers({ 
    state: (state = {}) => state, 
    form 
}); 

export default rootReducer; 

フォームフィールドは、一度追加すると期待通りに機能します。私は、実施例であなたのGithubプロジェクトのコピーをアップロードしました：鉱山と同様の問題に遭遇した人のため

https://github.com/hellojebus/so-Answer

Answer 2

。問題の原因は、最終的にredux形式のパッケージがまったくインストールされなかったという事実から来ています。だから、糸を使用してredux-formをインストールするか、npmを試してみるが、npmが動作することを確認する。