输入值为空React

Question

我不确定这可能是愚蠢的事情，但是当我的处理电子邮件和处理密码处理程序被点击时，我在表单上输入的文本得到空值。

登录容器

  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

登录表格

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

看来您的

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}

相同

Answer 2

我没有可用的解决方案。