Javascript 输入值为空

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

登录容器

  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)

import React，{Component}来自“React”
从“../actions/User/UserAsyncActions”导入*作为异步操作
从“../components/Login/Login”导入登录名
类LoginContainer扩展组件{
建造师（道具）{
超级（道具）
此.state={
电子邮件：“”，
密码：“”
}
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，密码）{
e、 坚持
此.setState（密码）
}
handleEmailInput（电子邮件）{
e、 坚持
此.setState（电子邮件）
}
手推式（e）{
e、 坚持
//e.预防违约（）
if（this.emailIsValid）（this.state.email）&&
this.passwordIsValid（this.state.password））{
this.props.login（this.state.email、this.state.password）
}
}
emailIsValid（电子邮件）{
e、 坚持
如果（！电子邮件）{
返回错误
}
返回真值
}
passwordIsValid（e，password）{
e、 坚持
如果（！密码）{
返回错误
}
返回真值
}
render（）{
返回（）
}
}
常量mapStateToProps=状态=>{
返回{
请求：state.user.requising，
loggedIn:state.user.loggedIn，
令牌：state.user.token，
会话：state.user.session
}
}
导出常量mapDispatchToProps={
登录：AsyncActions.login
}
导出{Login}
导出默认连接（MapStateTops、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

类登录扩展组件{
render（）{
返回(
)
}
}
导出默认登录名

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

import React，{Component}来自“React”
从“react bootstrap”导入{Button，FormControl，FormGroup，ControlLabel，PageHeader}
类LoginForm扩展组件{
render（）{
返回(
登录
电子邮件
密码
登录
)
}
}
导出默认登录表单

您的

值={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}

值={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}

相同，您是否以某种方式对{}使用了解构？它起作用了，我确实从您的更改中获得了一个值。我想知道其他人是如何做到这一点的，因为他们能够做到：handlePasswordInput（{password}）{this.setState（{password}）}react bootstrap Button组件包含一个onClick属性，因此您可以编写类似于

登录

的内容。不管怎样，这就是您可能想要的，因为提交表单将刷新页面，并且您将丢失所有信息。嗯，由于某种原因，对props.login的调用没有点击handleLoginPressedTry，请将其传递给onclick处理程序并查看是否触发。这样您就知道您正在将它正确地传递给组件。然后尝试让表单提交工作！另外，您是否以某种方式对{}使用了解构？它起作用了，我确实从您的更改中获得了一个值。我想知道其他人是如何做到这一点的，因为他们能够做到：handlePasswordInput（{password}）{this.setState（{password}）}react bootstrap Button组件包含一个onClick属性，因此您可以编写类似于

登录

的内容。不管怎样，这就是您可能想要的，因为提交表单将刷新页面，并且您将丢失所有信息。嗯，由于某种原因，对props.login的调用没有点击handleLoginPressedTry，请将其传递给onclick处理程序并查看是否触发。这样您就知道您正在将它正确地传递给组件。然后尝试让表单提交工作！