Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript redux表单在此无法正常工作_Javascript_Reactjs_React Redux - Fatal编程技术网

Javascript 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: (

我创建了一个包含表单的短模型,但是在访问时handleSignup的值是未定义的,这真的不应该发生。我希望表单submit的JSON在这里不起作用。这有点令人沮丧

我使用了reactstrap的表单,一切都很好。但是react redux表单中的表单组件未按预期工作

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));