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