无法获取按钮发射处理器

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)写入您的构造函数中。您在handleLoginPressed()方法中使用this.state方法，但它不确定，您实际上没有{ email, password }那里。

Answer 2

当使用type="submit"按钮，你应该使用<form>的onSubmit事件，而不是<button>的onClick事件。

<form onSubmit={this.props.login}> 

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

handleLoginPressed(e) { 
    e.preventDefault() 
    // ... 
}