redux-form Field pass class as component

Question

I tried class and functional component as redux-form component. It seems that the props from Field can hardly be passed to class. The code looks as follows:

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

The above code works fine. But if I turned the functional Rfc to class like this:

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

The input can not be updated and seems the component is rerendered everytime I type in the input node.

I think use a class is not a good idea as the principle should be separating the dumb component from smart component. But can I use class as component like a functional component in and what is the reason for the behavior above. Is there any advantage or disadvantage to use class than a functional component? Thanks!

The Complete code is as follows: the 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

Are you doing the :

export default Rfc 

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