如何將表單事件傳遞給父組件以防止默認？

Question

我有一個非常標準的形式：

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

然後我要處理的父組件的形式提交，通過此功能，

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

/* ... */ 

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

我遇到的問題是，event.preventDefault()不工作，也不看起來我是通過控制檯記錄正確的值嗎？

我假設我沒有正確傳遞或接收數值，但我不知道我錯在哪裏。

Answer 1

在子組件通event（只要你想，你可以將其命名）參數的方法從父組件

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

在父組件做這樣

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