Question

我有两个组成部分：

LoginForm ，用于呈现要在应用中登录的表单
LoginPage ，用于获取在LoginForm组件中输入的数据并将其发送到服务器

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

但是当我在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>
    );
}
}

Answer 1

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

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

1 个答案: