Javascript redux表单：动态定义handleSubmit

因为我是React生态系统的新手，我的描述和做事方式可能有点不对劲，但我希望你能关注我的问题

我有一个父组件，它从路由器中注入一个表单，并将状态和动作创建者映射到属性

Container.js

import * as actionCreators from "../actionCreators";

export default class ComponentA extends React.Component {

  render() {
    return (
      <div className="ComponentA">
        {this.props.children} //<--Form
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    listItems: state.get("listItems")
  };
}

export const Container = connect(mapStateToProps, actionCreators)(ComponentA);

路由器

const routes = <Route component={App}>
  <Route path="/" component={Container}/>
  <Route path="/a" component={Container}>
    <Route path="/a/create" component={Form}/>
  </Route>
</Route>;

render(
  <div>
    <Provider store={store}>
      <Router>{routes}</Router>
    </Provider>
  </div>,
  document.getElementById("content"));

const路由=
;
渲染(
{routes}
,
document.getElementById（“内容”）；

问题是

handleSubmit

不是未定义的，但它不是我的行为。实际上，我并不期望它被神奇地设置为正确的actionCreator，但是我如何传递函数呢？我尝试了操作名，而不是

handleSubmit

，但是函数没有定义。我看到的每个示例都将handleSubmit函数手动传递到表单组件中，但我不能这样做，因为表单是由路由器设置的

谢谢两件事：

您需要将字段信息传递给您的

---

那有用吗

谢谢。据我所知，我应该注入一个在提交时执行的函数。我可以直接在表单组件内部实现该函数，如您的示例（2），但我似乎无法将函数传递到props中。类似于

。我认为这是一个一般的redux问题，并不是特定于redux表单，但也许您看到了问题所在。我能把东西传给{this.props.children}吗？实际上我认为react-redux的connect会解决这个问题，但事实并非如此。@KenavR有点晚了，但要传递被调用的函数，您可以将其作为“onSubmit”传递，然后只绑定到表单中的{handleSubmit}，onSubmit将自动被调用

const routes = <Route component={App}>
  <Route path="/" component={Container}/>
  <Route path="/a" component={Container}>
    <Route path="/a/create" component={Form}/>
  </Route>
</Route>;

render(
  <div>
    <Provider store={store}>
      <Router>{routes}</Router>
    </Provider>
  </div>,
  document.getElementById("content"));