React-redux：如何将redux表单道具冒泡到父组件

Question

所以我一直在实现一个模式表单，允许我在列表中创建新用户，以及编辑它们。 我已经设置它，以便我在Modal中的实际形式在它自己的组件中，所以我可以很容易地将initialValues传递给表单以便填充它。 我遇到的问题是，当我尝试使用redux的handleSubmit函数时，我似乎无法从表单中获取.get()字段值，因为它一直告诉我.get()不是函数。 我以前见过这个作品，所以我不确定我做错了什么。

为了使事情尽可能短，这里是包含表单的组件中的render（）方法：

render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <form>
       <div>
           <Field
             name="first_name"
             component={TextField}
             hintText="First Name"
           />
       </div>
       <RaisedButton label="Update user" style={{marginRight: "10px"}} disabled={pristine || submitting} onClick={handleSubmit} primary={true} />
      </form>
   )
}

这是来自父组件的render方法：

render() {
   return (
     <Dialog
                  title={this.state.modalTitle}
                  modal={false}
                  open={this.state.userModalOpen}
                  onRequestClose={this.handleClose}
                >
                  <ManageUserform
                    isEditingUser={this.state.isEditingUser}
                    handleSubmit={this.submit}
                    handleClose={this.handleClose}
                    initialValues={this.state.user}/>
                </Dialog>

   )
}

这是我submit()表单时运行的实际submit()函数：

/**
   *  Submit the user form
   */
  submit(formProps) {

    const user = {
      first_name: formProps.get('first_name')
    };

    // Are we editing?
    if(this.state.isEditingUser) {
      user['_id'] = this.state.user.id;
      this.props.dispatch(updateUser(user));
    } else {
      // Dispatch action to convert the request to a work order
      this.props.dispatch(createUser(user));
    }

    // Close the modal
    this.handleClose();
  }

^这就是问题所在。 当我提交时，我收到一个错误：

Uncaught TypeError: formProps.get is not a function 。

以前，当我直接在父组件中使用表单时，我能够使用formProps.get()方法，但现在有一些东西在哪里，因为它在组件内部，它不会冒泡到它的父组件。 这里有什么小我不见了吗？

提前致谢！

Answer 1

因为你改变了函数调用上下文，你应该使用bind方法调用它，你应该设置new this 。 尝试更改onClick={handleSubmit.bind(this)} 。

Answer 2

所以使用redux形式，当你运行handleSubmit ，组件会查找onSubmit ，所以我需要更改我的组件的道具来反映这一点。 这是我更新的父组件的渲染方法代码：

render() {
   return (
     <Dialog
                  title={this.state.modalTitle}
                  modal={false}
                  open={this.state.userModalOpen}
                  onRequestClose={this.handleClose}
                >
                  <ManageUserform
                    isEditingUser={this.state.isEditingUser}
                    onSubmit={this.submit}
                    handleClose={this.handleClose}
                    initialValues={this.state.user}/>
                </Dialog>

   )
}