在反應中處理來自子組件的提交和更改

Question

我有兩個組成部分：

• LoginForm用於呈現表單以在應用程序中登錄
• LoginPage獲取在 LoginForm 組件中輸入的數據並將其發送到服務器

目前我想處理表單提交和輸入值的更改。 我在react官方網站上閱讀了這兩篇文章來幫助我：

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

但是當我在 LoginForm 中輸入一個值時，我仍然沒有檢測到來自 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>
    )
}

}

登錄表單.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>
        );
    }
}