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

看起来你在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}

相同

输入值为null React

1 个答案: