reactjs - React-redux:如何将 redux 表单 Prop 冒泡到父组件

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() {
   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();
  }

^ 这就是问题所在。提交时出现错误:

未捕获类型错误:formProps.get 不是函数。

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

提前致谢!

Answer 1

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