React Js如何從兩個React Redux字段調用相同的函數？

當初始渲染React時，組件方法會被標題和內容字段調用。然而，雖然Title字段中的額外輸入更改調用renderField方法，但內容字段似乎並未這樣做。這反映在控制檯日誌中，初始組件加載產生2「輸入改變」，並且在標題，「輸入改變」打印中進行其他更改，但在對內容字段進行更改時沒有響應。這是怎麼回事？React Js如何從兩個React Redux字段調用相同的函數？

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);

來源

2017-05-27 MLhacker

我把你的renderField和render方法粘貼到我的React項目中，並且它適用於兩者。不知道爲什麼它不適合你。 – hellojebus

你可以在這個項目中試用嗎？ https://github.com/datumsays/React-Redux-Error – MLhacker

這是幾乎相同的代碼。我想知道這是否是一個包問題。 – MLhacker

好吧我能夠複製您的問題。問題是redux-form不僅僅是即插即用。你需要將它添加到你的根減速，如下圖所示：

//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

來源

2017-05-28 00:43:55 hellojebus

好吧。讓我試試你的建議 – MLhacker

@MLhacker讓我知道它是否工作。 – hellojebus

試過了，但沒有奏效。我想要注意的一件事情是，無論哪種情況，我都會得到一個錯誤，指出以下內容：「bundle.js：1212未捕獲錯誤：addComponentAsRefTo（...）：只有ReactOwner可以擁有引用，您可能會添加一個引用到一個組件沒有在組件的'render'方法中創建，或者你有多個React加載副本「 – MLhacker

對於誰遇到過類似的問題，因爲我的任何人。問題的根源最終來自於redux形式的包完全沒有安裝。因此，要麼使用紗線安裝redux-form或嘗試npm，但要確保檢查npm的工作。

來源

2017-05-28 01:15:03 MLhacker

React Js如何從兩個React Redux字段調用相同的函數？

回答

相關問題