Javascript redux表单在此无法正常工作
我创建了一个包含表单的短模型,但是在访问时handleSignup的值是未定义的,这真的不应该发生。我希望表单submit的JSON在这里不起作用。这有点令人沮丧 我使用了reactstrap的表单,一切都很好。但是react redux表单中的表单组件未按预期工作Javascript redux表单在此无法正常工作,javascript,reactjs,react-redux,Javascript,Reactjs,React Redux,我创建了一个包含表单的短模型,但是在访问时handleSignup的值是未定义的,这真的不应该发生。我希望表单submit的JSON在这里不起作用。这有点令人沮丧 我使用了reactstrap的表单,一切都很好。但是react redux表单中的表单组件未按预期工作 const mapStateToProps = state => { return { } } const mapDispatchToProps = (dispatch) => ({ postUser: (
const mapStateToProps = state => {
return {
}
}
const mapDispatchToProps = (dispatch) => ({
postUser: (user) => dispatch(postUser(user)),
resetForm: () => {dispatch(actions.reset('form'))},
})
class Header extends Component {
constructor(props) {
super(props);
this.state = {
isNavOpen: false,
isModalOpen: false,
isModalOpen2: false
};
this.toggleNav = this.toggleNav.bind(this);
this.toggleModal = this.toggleModal.bind(this);
this.toggleModal2 = this.toggleModal2.bind(this);
this.handleLogin = this.handleLogin.bind(this);
this.handleSignup = this.handleSignup.bind(this);
}
handleSignup (values) {
const user = {
firstname : values.fname,
lastname : values.lname,
email : values.email,
password : values.password,
username : values.username
}
// {console.log('check hererre')}
// {console.log(user)}
this.toggleModal2();
this.props.resetForm();
this.props.postUser(user);
}
.
.
.
.
.
这是我现在的模式
<Modal isOpen={this.state.isModalOpen2} toggle={this.toggleModal2}>
<ModalHeader toggle={this.toggleModal2} >Sign Up</ModalHeader>
<ModalBody>
<div className="">
<Form model="form" onSubmit={(values) => this.handleSignup(values)}>
<FormGroup className="row">
<Label htmlFor="username" md={4} >Username</Label>
<div className="col-md-8">
<Control.text model=".username" id="username" name="username"
placeholder="Username"
className="from-control"
validators={{required, minLength: minLength(3), maxLength: maxLength(15)}}
/>
<Errors
className="text-danger"
model=".username"
show="touched"
messages={{
required : 'Required',
minLength : 'Must be greater than 2 charecters',
maxLength : 'Must be less than 15 charecters'
}}
/>
</div>
</FormGroup>
<FormGroup className="row" >
<Label htmlFor="fname" md={4}>First Name</Label>
<div className="col-md-8">
<Control.text model=".fname" id="fname" name="fname"
placeholder = "First Name"
className="form-control"
validators={{required, minLength: minLength(3), maxLength: maxLength(15)}}
/>
<Errors
className="text-danger"
model=".fname"
show="touched"
messages={{
required : 'Required',
minLength : 'Must be greater than 2 charecters',
maxLength : 'Must be less than 15 charecters'
}}
/>
</div>
</FormGroup>
<FormGroup className="row" >
<Label htmlFor="lname" md={4} >Last Name</Label>
<div className="col-md-8">
<Control.text model=".lname" id="lname" name="lname"
placeholder="Last Name"
className="form-control"
validators={{required, minLength: minLength(3), maxLength: maxLength(15)}}
/>
<Errors
className="text-danger"
model=".lname"
show="touched"
messages={{
required : 'Required',
minLength : 'Must be greater than 2 charecters',
maxLength : 'Must be less than 15 charecters'
}}
/>
</div>
</FormGroup>
<FormGroup className="row" >
<Label htmlFor="password" md={4}>Password</Label>
<div className="col-md-8">
<Control.text type="password" model=".password" id="password" name="password"
placeholder="Password"
className="form-control"
validators={{required, minLength: minLength(3), maxLength: maxLength(15)}}
/>
<Errors
className="text-danger"
model=".password"
show="touched"
messages={{
required : 'Required',
minLength : 'Must be greater than 2 charecters',
maxLength : 'Must be less than 15 charecters'
}}
/>
</div>
</FormGroup>
<FormGroup className="row" >
<Label htmlFor="email" md={4}>Email</Label>
<div className="col-md-8">
<Control.text type="email" model=".email" id="email" name="email"
placeholder="E-Mail"
className="form-control"
validators={{required, validEmail}}
/>
<Errors
className="text-danger"
model=".email"
show="touched"
messages={{
required : 'Required',
validEmail : 'invalid email address'
}}
/>
</div>
</FormGroup>
<FormGroup>
<Button type="submit" color="primary" >SignUP NOW !</Button>
</FormGroup>
</Form>
</div>
</ModalBody>
</Modal>
预期的结果是handleSignup中包含JSON的值,而不是未定义的值。将问题分解成块时,总是很容易识别问题。我现在在这方面非常出色,,,,,代码应该真的可以工作…表单上的onSubmit部分应该可以正常工作…如果您将
onSubmit={(values)=>this.handleSignup(values)}
更改为onSubmit={this.handleSignup}
,会发生什么?我们需要将onSubmit属性传递给表单组件,但要读取其中的handleSubmit属性。handleSubmit通过reduxForm HOC神奇地包裹在Submit上。你可以在网上找到更多关于它的信息
export default withRouter(connect(mapStateToProps,mapDispatchToProps)
(Header));