我正在尝试将react-redux-form与react-bootstrap集成。
这是我的代码
import React from 'react';
import { Control,Form,actions,Errors } from 'react-redux-form';
import { connect } from 'react-redux';
import * as ReactBootstrap from 'react-bootstrap';
class UserRegistration extends React.Component {
render() {
const { dispatch } = this.props;
const required = (val) => val && val.length;
const ReduxFormControl = ({input, meta, ...props}) => {
return <ReactBootstrap.FormControl {...props} {...input} />
};
const Forms = ({input, meta, ...props}) => {
return <ReactBootstrap.Form {...props} {...input} />
};
return (
<Form model="userReg" onSubmit={(userReg) => dispatch(actions.load("userReg",userReg))} component={Forms} >
<label >fname</label>
<Control.text model="userReg.fname" validators={{required}} placeholder="Name" component={ReduxFormControl} />
<Errors model="userReg.fname" messages={{required:'required'}} />
<label>lame</label>
<Control.text model="userReg.lname" validators={{required}} placeholder="lame" component={ReduxFormControl} />
<button type="submit">register</button>
</Form >
)
}
}
export default connect (null)(UserRegistration);
当我将表单组件传递给redux表单标记时,它显示以下错误。
index.js:2178 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
Check the render method of `Form`.
in Forms (created by Form)
in Form (created by Connect(Form))
in Connect(Form) (at registration.js:18)
in UserRegistration (created by Connect(UserRegistration))
in Connect(UserRegistration) (created by Route)
in Route (at routes.js:14)
in div (at routes.js:10)
in Router (created by BrowserRouter)
in BrowserRouter (at routes.js:9)
in routes (at index.js:13)
in Provider (at index.js:12)
有人可以帮助我解决这个警告,还有其他更好的方法来整合react -bootstrap和react-redux-form吗?