输入值为空反应

Question

我不确定这笔交易可能是什么愚蠢的，但是当我处理电子邮件和处理密码处理程序时，我得到了我在表单上输入的文本的空值。

LoginContainer

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: '', 
     password: '' 
     } 

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

    handlePasswordInput(e, password) { 
     e.persist() 
     this.setState(password) 
    } 

    handleEmailInput(e, email) { 
     e.persist() 
     this.setState(email) 
    } 

    handleLoginPressed(e) { 
     e.persist() 
     // e.preventDefault() 
     if (this.emailIsValid(this.state.email) && 
      this.passwordIsValid(this.state.password)) { 
     this.props.login(this.state.email, this.state.password) 
     } 
    } 

    emailIsValid(e, email) { 
     e.persist() 
     if (!email) { 
     return false 
     } 
     return true 
    } 

    passwordIsValid(e, password) { 
     e.persist() 
     if (!password) { 
     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) 

登录

class Login extends Component { 
    render(){ 
     return (
     <div> 
      <LoginForm 
      handleEmailInput={this.props.handleEmailInput} 
      handlePasswordInput={this.props.handlePasswordInput} 
      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 onSubmit={this.props.login}> 
      <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" 
       // value={this.state.email} 
      /> 
      <ControlLabel>Password</ControlLabel> 
      <FormControl 
       bsSize="small" 
       className="ft-password" 
       componentClass="input" 
       onChange={this.props.handlePasswordInput} 
       placeholder="Enter Password" 
       style={{ width: 300}} 
       type="text" 
       // value={this.state.password} 
      /> 
      </FormGroup> 
      <Button 
      className='ft-login-button' 
      type='submit'>Login</Button> 
     </form> 
     </div>) 
    } 

} 

export default LoginForm 

Answer 1

看起来你是O：与value={this.state.password}正确的路径。但是由于您的状态位于父组件中，因此您必须将状态关闭并且值变为value={this.props.value}。事件处理程序通常是这个样子：

handlePasswordInput(e, password) { 
     e.persist() 
     this.setState({ password: e.target.value }) 
    } 

他们可能是不同的，由于FormControl组件，但它是值得改变他们看，如果这是你的问题。此外，onChange处理程序隐式传入e，并且必须使用箭头函数表达式明确传递其他任何内容。

编辑：如果他们能够像你注释中做一些事情，他们可能做了这样的事：

handlePasswordInput(e, password) { 
     e.persist() 
     const password = e.target.value 
     this.setState({ password }) 
    } 

在ES6，{ password }相同{ password: password}