Question

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

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

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

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;

输入无法更新，似乎每次输入输入节点时都会重新呈现组件。

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

完整代码如下： RfcStore.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;

RfcField.js

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

RfcA.js

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

RfcC.js

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

RfcP.js

{{1}}

Answer 1

你在做：

export default Rfc

你能分享完整的例子，我看到的是代码应该可以正常工作。

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

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

1 个答案: