フォームイベントを親コンポーネントに渡してDefaultを防ぐ方法

Question

私はかなり標準的な形式があります：私は、私が遭遇した問題はevent.preventDefault()が動作していないということです

submitForm (value) { 
    event.preventDefault() 
    console.log(value.email) 
} 

/* ... */ 

<Form 
    title='What are you waiting for?! Sign up now' 
    onSubmit={this.submitForm} /> 

この機能によって、親コンポーネントでフォームのサブミットを処理したい

export default class Form extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     email: '', 
     refCode: '' 
    } 
    this.onSubmit = this.onSubmit.bind(this) 
    this.changeEmail = this.changeEmail.bind(this) 
    } 

    changeEmail (event) { 
    this.setState({ email: event.target.value }) 
    } 

    onSubmit() { 
    this.props.onSubmit(this.state) 
    } 

    render() { 
    return (
     <div> 
     <h2>{this.props.title}</h2> 
     <form className={cx('Form')} onSubmit={this.onSubmit}> 
      <input 
      className={cx('Form-email')} 
      onChange={this.changeEmail} 
      value={this.state.email} 
      type='email' 
      placeholder='email' /> 
      <input className={cx('Form-refcode')} type='text' placeholder='enter referal code' /> 
      <input className={cx('Form-btn')} type='submit' value='sign up' /> 
     </form> 
     </div> 
    ) 
    } 
} 

を、また私は正しい値をコンソール経由でログに記録しているようです。

ここで正しく値を渡したり受け取りしていないと思われますが、どこが間違っているのか分かりません。子コンポーネントのパスで

Answer 1

event（あなたが望むようあなたはそれに名前を付けることができます）親コンポーネントに親コンポーネント

onSubmit (event) { 
    this.props.onSubmit(event, this.state) 
} 

からメソッドの引数この

submitForm (event, value) { 
    event.preventDefault() 
    console.log(value.email) 
} 

好きです