javascript - 无法获取 Fire Handler 的按钮

Question

我在测试 React 应用程序方面很糟糕，还没有做过很多……尤其是事件

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

我唯一看到的是:

我不确定如何真正测试这个TBH。我认为这不起作用。

代码

登录

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

登录表单

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

登录容器

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)。您在 handleLoginPressed() 方法中使用了 this.state，但它是未定义的，您实际上没有 { email, password } 。