入力値がNULLです。

Question

私は取引が多分愚かだとは思っていませんが、私のハンドル電子メールとパスワードハンドラが当たったとき、私はフォームに入力したテキストのnull値を取得します。

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 n正しいパスはvalue={this.state.password}です。しかし、あなたの状態が親コンポーネントにあるので、あなたは状態を渡す必要があり、値はvalue={this.props.value}になります。イベントハンドラは、通常このような何かを見て：

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

を彼らが原因FormControlコンポーネントに異なる可能性がありますが、それはそれはあなたの問題だかどうかを確認するために、それらを変更する価値があります。また、onChangeハンドラは暗黙的にeを渡します。矢印関数式を使用して明示的に他のものを渡す必要があります。

編集：彼らはあなたがコメントで述べたような何かをすることができたならば、彼らはおそらくこのようなものでした：ES6で

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

を、{ password }また、使用している{ password: password}