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

时间:2017-05-08 01:06:25

标签: reactjs react-redux react-redux-form

因此,我一直在实现模式表单的实现,这允许我在列表中创建新用户,以及编辑它们。我已经设置了它,以便我在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 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()方法,但现在有一些事情发生在哪里,因为它在组件内部,它没有冒泡到它的父组件。我有什么小的遗失吗?

提前致谢!

0 个答案:

没有答案