javascript - 处理react中子组件的提交和更改

我有两个组成部分:

LoginForm ，用于呈现表单以登录应用程序

LoginPage ，它获取在LoginForm组件中输入的数据并将其发送到服务器

目前，我想处理表单提交和输入值的更改。我在react官方网站上阅读了这两篇文章以帮助我:

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

https://reactjs.org/docs/forms.html

但是，当我在LoginForm中输入值时，我仍然没有检测到LoginPage组件的提交和更改。

你能帮我看看我的错误在哪里吗？
预先感谢。

我的两个组成部分:

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>
    );
}
}

最佳答案

handleInputChange作为LoginForm属性传递给onChange，类似地，handleSubmit传递给名称onSubmit，因此您需要像

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>
        );
    }
}

关于javascript - 处理react中子组件的提交和更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48773177/