在反应中处理来自子组件的提交和更改

Question

I have two components :

• LoginForm which is used to render the form to login in the app
• LoginPage which get the data entered in the LoginForm component and send it to a server

For the moment I would like to handle the form submit and the change of an input value. I read these two articles in the react official website to help me :

• https://reactjs.org/docs/lifting-state-up.html
• https://reactjs.org/docs/forms.html

But I still don't detect the submit and the change from the LoginPage component when I'm entering a value in LoginForm.

Can you help me to see where is my mistake ? Thanks by advance.

My two components :

LoginPage.js

 class LoginPage extends Component {
 constructor(props) {
    super(props);
    this.state = {
        login: true, //switch between Login and SignUp
        email: '',
        password: '',
        firstName: '',
        lastName: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
}

handleSubmit(){
    alert("SUBMIT");
}

handleInputChange(event) {
    alert("YOUHOU");
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });

    alert("YEEEP");
  }

render(){
    return (
        <div>
            <div>
                {this.state.login ? 
                    <Login onSubmit={this.handleSubmit} onChange={this.handleInputChange}/> 
                    : 
                    <Register />
                }
            </div>
            <a
                onClick={() => this.setState({ login: !this.state.login })}
            >
            {this.state.login ? 'Besoin d\'un compte ?' : 'Déjà un compte ?'}
            </a>
        </div>
    )
}

}

LoginForm.js

class LoginForm extends Component {
render(){
    return (
        <div>
          <Card>
            <form onSubmit={this.props.handleSubmit}>
              <div>
                <div>
                    <TextField name="email" floatingLabelText="Email" errorText="Champ obligatoire" type="text" onChange={this.props.handleInputChange}/>
                </div>
                <div>
                    <TextField name="password" floatingLabelText="Mot de passe" errorText="Champ obligatoire" type="password" onChange={this.props.handleInputChange} />
                </div>
                <CardActions>
                    <div>
                        <RaisedButton label="Se connecter" primary={true} type="submit" fullWidth />
                    </div>
                </CardActions>
              </div>
            </form>
          </Card>
        </div>
    );
}
}

Answer 1

handleInputChange is passed down to LoginForm as onChange prop and similarly handleSubmit is passed down by the name onSubmit and hence you need to use it like

class LoginForm extends Component {
    render(){
        return (
            <div>
              <Card>
                <form onSubmit={this.props.onSubmit}>
                  <div>
                    <div>
                        <TextField name="email" floatingLabelText="Email" errorText="Champ obligatoire" type="text" onChange={this.props.onChange}/>
                    </div>
                    <div>
                        <TextField name="password" floatingLabelText="Mot de passe" errorText="Champ obligatoire" type="password" onChange={this.props.onChange} />
                    </div>
                    <CardActions>
                        <div>
                            <RaisedButton label="Se connecter" primary={true} type="submit" fullWidth />
                        </div>
                    </CardActions>
                  </div>
                </form>
              </Card>
            </div>
        );
    }
}