redux-form字段传递类作为组件

Question

我尝试将类和功能组件作为redux-form组件。 看来来自Field的道具很难传递给课堂。 该代码如下所示：

const Rfc=(props,field)=>(
    <div>
        <input  {...field.input} type="text" onChange={props.mychange}/>
    </div>
)

class MyForm extends React.Component{
    render(){
        const{dispatch,field}=this.props;
        return(
            <form>
                <div>
                    <Field name="myfield" component={Rfc}
                        field={field}
                        mychange={
                            (e)=>{
                                console.log(e.target.value);
                                dispatch({type:'test',payload:'1'});
                                console.log("see console")
                            }
                        }
                    />
                </div>
            </form>
        )
    }
} 

上面的代码工作正常。 但是，如果我将功能性Rfc变成这样的类：

class Rfc extends Component{
    render(){
        const{mychange,input}=this.props;
        return(
            <div >
                <input  {...input} type="text" onChange={mychange}/>
                <span>value is </span>
            </div>
        )
    }
}

输入无法更新，似乎每次我在输入节点中键入时都会重新渲染组件。

我认为使用类不是一个好主意，因为原理应将哑组件与智能组件分开。 但是我可以将类用作功能组件之类的组件吗？发生上述行为的原因是什么？ 使用类比功能组件有什么优点或缺点？ 谢谢！

完整的代码如下：RfcStore.js：

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import RfcA from './RfcA.js';

function RfcReducer(state={},action){
    switch(action.type){
        case 'RfcA':
            console.log("rfca");
            return Object.assign({},state,{obsra:action.payload});
        case 'test':
            console.log("test dispatched");
            return state;
        default:
            return state;
    }
}
const reducers = {
    RfcReducer,
    form: formReducer
};
const reducer = combineReducers(
    reducers
     //form: formReducer
);
const RfcStore = createStore(reducer);
export default RfcStore;

RfcField.js

import React,{Component} from 'react';
import{Field,reduxForm,Fields} from 'redux-form';
import RfcA from './RfcA';

/*
class Rfc extends Component{
    render(){
        const{mychange,input}=this.props;
        return(
            <div >
                <input  {...input} type="text" onChange={mychange}/>
                <span>value is </span>
            </div>
        )
    }
}
*/


const Rfc=(props,field)=>(
    <div>
        <input  {...field.input} type="text" onChange={props.mychange}/>
    </div>
)

const Rfc1=(props,fields)=>(
    <div>
        <input   type="text" onChange={props.input1Change}/>
        <input   type="text" onChange={props.input2Change}/>
    </div>
)


class MyForm extends React.Component{
    render(){
        const{dispatch,field,fields}=this.props;
        return(
            <form>
                <div>
                    <Field name="myfield" component={Rfc}
                           field={field}
                           mychange={
                               (e)=>{
                                   console.log(e.target.value);
                                   dispatch({type:'test',payload:'1'});
                                   console.log("see console")
                               }
                           }
                    />
                    <Fields names={['input1','input2']} component={Rfc1}
                            input1Change=(e)={console.log("1"+e.target.value);}
                            input2Change=(e)={console.log("2"+e.target.value);}
                    />
                </div>
            </form>
        )
    }
}
MyForm=reduxForm({form:'myform'})(MyForm);
export default MyForm;

RfcA.js

const RfcA=(myvalue)=>{
    return {
        type: 'RfcA',
        myvalue
    }
};
export default RfcA;

RfcC.js

import MyForm from './RfcField.js';
import {connect} from 'react-redux';
const RfcC=connect()(MyForm);
export default RfcC;

RfcP.js

import MyForm from './RfcField.js';
import {connect} from 'react-redux';
const RfcC=connect()(MyForm);
export default RfcC;

Answer 1

你在做：

export default Rfc 

https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#usage