[英]redux-form Field pass class as component
I tried class and functional component as redux-form component. 我尝试将类和功能组件作为redux-form组件。 It seems that the props from Field can hardly be passed to class. 看来来自Field的道具很难传递给课堂。 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: 但是,如果我将功能性Rfc变成这样的类:
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: 完整的代码如下: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 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 RfcA.js
const RfcA=(myvalue)=>{
return {
type: 'RfcA',
myvalue
}
};
export default RfcA;
RfcC.js RfcC.js
import MyForm from './RfcField.js';
import {connect} from 'react-redux';
const RfcC=connect()(MyForm);
export default RfcC;
RfcP.js RfcP.js
import MyForm from './RfcField.js';
import {connect} from 'react-redux';
const RfcC=connect()(MyForm);
export default RfcC;
Are you doing the : 你在做:
export default Rfc
https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#usage https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#usage
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.