如何将表单事件传递给父组件以防止默认？答案

【问题标题】：How to pass forms event to a parent component to preventDefault?如何将表单事件传递给父组件以防止默认？
【发布时间】：2016-05-31 08:32:28
【问题描述】：

我有一个很标准的表格：

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() 不起作用，我似乎也没有通过控制台获取正确的值。

我假设我在这里没有正确传递或接收值，但我不知道我哪里出错了。

【问题讨论】：

标签： javascript forms reactjs

【解决方案1】：

在子组件中将event（你可以随意命名）参数从父组件传递给方法

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

在父组件中这样做

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

【讨论】：