在反应中处理子组件的提交和更改答案

【问题标题】：Handle submit and change from child component in react在反应中处理子组件的提交和更改
【发布时间】：2018-07-24 04:46:51
【问题描述】：

我有两个组件：

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

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

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

【问题讨论】：

标签： javascript forms reactjs

【解决方案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>
        );
    }
}

【讨论】：