我正在使用react-redux-forms,按照快速入门,我创建了反应组件:
此类包含存储定义和提供程序
import React from 'react';
import { Provider } from 'react-redux';
import { createStore,applyMiddleware } from 'redux';
import { combineForms } from 'react-redux-form';
import RecordForm from './components/RecordForm.jsx'
const initRecord= {
name: '',
SUKL: '',
ATC: ''
};
const store = createStore(combineForms({
record: initRecord
}));
@translate(['record'], { wait: true })
export default class App extends React.Component {
constructor(props){
super(props);
}
render() {
const { t }= this.props;
return (
<div>
<div className="row">
<div className="row header">
<h1>
{t('record.NewRecord')}
</h1>
</div>
<div className="row">
<Provider store={ store }>
<RecordForm />
</Provider>
</div>
</div>
</div>
);
}
这是表单文件:
import React from 'react';
import { connect } from 'react-redux';
import { Control, Form } from 'react-redux-form';
export default class RecordForm extends React.Component {
constructor(props){
super(props);
}
handleSubmit(record) {
const { dispatch } = this.props;
///dispatch is undefined !!!!!!!
}
render() {
return (
<div>
<Form model="record" onSubmit={(record) => this.handleSubmit(record)}>
<Control.text model="record.name" />
<button type="submit">
OK!
</button>
</Form>
</div>
);
}
}
当我处理 Sumbit 部分时 - 调度是未定义的。当我调试它时,即使在 RecordForm 的构建器中,道具或任何与形式相关的内容中也没有调度。我应该添加一些像 connect(( 这样的注释吗?我错过了什么?
您需要使用connect()
函数连接组件。正如 react-redux 文档中提到的,您可以在没有任何参数的情况下使用 connect()
。
引用提供的链接:
注入只调度,不听商店
导出默认连接(((TodoApp(
但是,如果您提供自定义mapDispatchToProps
函数作为参数,则不会向您提供调度。如果您仍然希望它作为 props 提供,则需要在 mapDispatchToProps
实现中自己显式返回它。您可以在 react-redux 的常见问题解答部分阅读有关它的信息。
另外,如果您想尝试实验性decorator
功能,您可以使用 babel 使用它。在这种情况下,您可以使用@connect
连接组件,如下所示。
@connect()
export default class MyComponent extends React.Component {
// ... your code goes here.
}