Eingabewert ist null React

Question

Ich bin mir nicht sicher, was der Deal ist wahrscheinlich etwas dumm, aber wenn meine E-Mail-Handle und Handle-Passwort-Handler getroffen werden, bekomme ich null Werte für Text, den ich auf dem Formular eingegeben.

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) 

Anmeldung

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

Es sieht aus wie Sie waren o n den richtigen Weg mit der value={this.state.password}. Da sich Ihr Status jedoch in der übergeordneten Komponente befindet, müssen Sie den Status übergeben, und der Wert wird value={this.props.value}. Die Event-Handler in der Regel wie folgt aussehen:

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

Sie konnten unterschiedlich sein wegen der Formcontrol-Komponente, aber es lohnt sich, sie zu ändern, um zu sehen, ob das Ihr Problem. OnChange-Handler übergeben implizit auch e und Sie müssen einen Pfeilfunktionsausdruck verwenden, um alles andere explizit einzugeben.

Edit: Wenn sie in der Lage waren, etwas zu tun, wie Sie im Kommentar erwähnt, haben sie wahrscheinlich so etwas wie folgt aus:

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

In es6, { password } die gleiche wie { password: password}