Question

我很擅长测试反应应用程序，还没有完成任务......尤其是事件

鉴于以下代码，当我单击浏览器中的提交按钮时，我没有看到任何错误。我正在尝试使用react bootstrap的事件属性将它们设置为我通过道具收到的处理程序。

我唯一看到的是：

我不确定如何真正测试这个TBH。我觉得它不起作用。

代码

登录

class Login extends Component {
  render(){
      return (
        <div>
          <LoginForm login={this.props.login} />
        </div>
      )
  }
}
export default Login

LoginForm的

import React, { Component } from 'react'
import { Button, FormControl, FormGroup, ControlLabel, PageHeader } from 'react-bootstrap'

class LoginForm extends Component {
  render(){
    return (
      <div className='ft-login-form'>
        <PageHeader className='ft-header'>Login</PageHeader>
        <form>
          <FormGroup controlId="formBasicText" >
            <ControlLabel>Email</ControlLabel>
            <FormControl
              bsSize="small"
              className="ft-username"
              componentClass="input"
              onChange={this.props.handleEmailInput}
              placeholder="Enter mail"
              style={{ width: 300}}
              type="text"

            />
            <ControlLabel>Password</ControlLabel>
            <FormControl
              bsSize="small"
              className="ft-password"
              componentClass="input"
              onChange={this.props.handlePasswordInput}
              placeholder="Enter Password"
              style={{ width: 300}}
              type="text"

            />
          </FormGroup>
          <Button
            className='ft-login-button'
            onClick={this.props.login}
            type='submit'>Login</Button>
        </form>
      </div>)
  }

}

export default LoginForm

LoginContainer

import { connect } from 'react-redux'
import React, { Component } from 'react'

import * as AsyncActions from '../actions/User/UserAsyncActions'
import Login from '../components/Login/Login'

class LoginContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      email: null,
      password: null
    }

    this.handleEmailInput = this.handleEmailInput.bind(this)
    this.emailIsValid = this.emailIsValid.bind(this)
    this.handlePasswordInput = this.handlePasswordInput.bind(this)
  }

  handlePasswordInput(password) {
    this.setState({ password })
  }

  handleEmailInput(email) {
    this.setState({ email })
  }

  handleLoginPressed() {
    console.log("got here")
    const { email, password } = this.state

    if (this.emailIsValid(this.state.email) &&
        this.passwordIsValid(this.state.password)) {
      this.props.login(email, password)
    }
  }

  emailIsValid(email) {
    if (!email) {
      alert('Email is required')
      return false
    }
    return true
  }

  passwordIsValid(password) {
    if (!password) {
      alert.alert('Error', 'Password is required');
      return false
    }
    return true
  }

  render(){
    return( <Login
      handleEmailInput={this.handleEmailInput}
      handlePasswordInput={this.handlePasswordInput}
      login={this.handleLoginPressed}
    /> )
  }
}

const mapStateToProps = state => {
  return {
    requesting: state.user.requesting,
    loggedIn: state.user.loggedIn,
    token: state.user.token,
    session: state.user.session
  }
}

export const mapDispatchToProps = {
  login: AsyncActions.login
}

export { Login }
export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

Answer 1

将this.handleLoginPressed = this. handleLoginPressed.bind(this)放入构造函数中。您在this.state方法中使用handleLoginPressed()，但未定义，实际上您没有{ email, password }。

Answer 2

使用type="submit"按钮时，您应该使用<form>的{{1}}事件，而不是onSubmit＆＃39; {{1}事件。

<button>

您还需要在事件处理程序中取消常规表单提交：

onClick

无法使用Button to Fire Handler

2 个答案: