Получение события event.preventDefault(); не является функцией. Почему это не функция?

Question

Я работаю с реагировать и после нескольких учебных пособий для представления формы, где я бегу в эту проблему в моей консоли:

contact.js:67 Uncaught TypeError: event.preventDefault is not a function(…) 

Вот мой код:

contact.js

class ContactForm extends Component { 


    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.state = { open: false }; 
    } 

    handleSubmit(event) { 
    console.log('hello'); 
    event.preventDefault(); 
    } 

    handleTouchTap =() => { 
    this.setState({ open: true }); 
    } 

    handleRequestClose =() => { 
    this.setState({ open: false }); 
    } 

    render() { 
    return(
     <div> 
     <Paper className="Form" zDepth={2}> 
      <Formsy.Form onSubmit={this.handleSubmit}> 
      <FormsyText 
       name="Enter Name" 
       floatingLabelText="Enter your name" 
      /> 
      <FormsyText 
       name="Enter email address" 
       floatingLabelText="Enter your email address" 
      /> 
      <FormsyText 
       name="message" 
       floatingLabelText="What can I do for you?" 
      /> 
      <RaisedButton onTouchTap={this.handleTouchTap} 
       type="submit" 
       label="Submit your message" 
       primary={true} 
      /> 
      <Snackbar 
       open={this.state.open} 
       message="Thank your for submitting your message. I'll get back to you as soon as I can!" 
       autoHideDuration={2000} 
       onRequestClose={this.handleRequestClose} 
      /> 
      </Formsy.Form> 
     </Paper> 
     </div> 
    ); 
    } 
} 

export { ContactForm }; 

Как вы можете видеть в моем коде и из того, что я могу сказать, я правильно связал handleSubmit с моим ContactForm и должен правильно его называть на обработчике onSubmit с this.handleSubmit. Что мне здесь не хватает?

Answer 1

Вы не используете форму по умолчанию ...

Это Formsy

Из документов

https://github.com/christianalfoni/formsy-react/blob/master/API.md#onsubmit

onSubmit (данные, resetForm, invalidateForm)

Выполняет функцию для запуска, когда кнопка отправки был нажат.

Первый аргумент - данные формы. Второй аргумент будет сбросить форму. Третий аргумент аннулирует форму, принимая объект, который сопоставляется с входами. Это полезно для серверной части проверки . Например. {email: «Это письмо принято»}. Сброс или аннулирование формы вызовет запуск setState на элементе формы .

Answer 2

Formsy передает данные формы как первый параметр в обработчик события отправки. Эта форма данных не имеет функции preventDefault().

Если обратиться к внутренней реализации механизма размещаете, вы увидите, что preventDefault() всегда вызывается по умолчанию:

submit: function (event) { 

    event && event.preventDefault(); 

    // Trigger form as not pristine. 
    // If any inputs have not been touched yet this will make them dirty 
    // so validation becomes visible (if based on isPristine) 
    this.setFormPristine(false); 
    var model = this.getModel(); 
    this.props.onSubmit(model, this.resetModel, this.updateInputsWithError); 
    this.state.isValid ? this.props.onValidSubmit(model, this.resetModel, this.updateInputsWithError) : this.props.onInvalidSubmit(model, this.resetModel, this.updateInputsWithError); 

}, 

Source