Настройка onSubmit в React.js

При отправке формы я пытаюсь doSomething() вместо поведения по умолчанию.

По-видимому, в React onSubmit - поддерживаемое событие для форм. Однако, когда я пытаюсь выполнить следующий код:

var OnSubmitTest = React.createClass({
    render: function() {
        doSomething = function(){
           alert('it works!');
        }

        return <form onSubmit={doSomething}>
        <button>Click me</button>
        </form>;
    }
});

Выполняется метод doSomething(), но после этого поведение по умолчанию по-прежнему выполняется.

Вы можете проверить это в моем jsfiddle.

Мой вопрос: как предотвратить поведение сообщения по умолчанию?

+61
12 февр. '15 в 13:53
источник поделиться
4 ответа

В вашей функции doSomething() перейдите в событие e и используйте e.preventDefault().

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}
+72
12 февр. '15 в 14:03
источник

Я также предлагаю перемещать обработчик событий вне рендеринга.

var OnSubmitTest = React.createClass({

  submit: function(e){
    e.preventDefault();
    alert('it works!');
  }

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});
+35
12 февр. '15 в 15:04
источник
<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

он отлично работает для меня

+6
01 июн. '17 в 9:55
источник

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

var OnSubmitTest = React.createClass({
        render: function() {
        doSomething = function(event){
           event.preventDefault();
           alert('it works!');
        }

        return <form onSubmit={this.doSomething}>
        <button>Click me</button>
        </form>;
    }
});
+3
12 февр. '15 в 14:04
источник

Посмотрите другие вопросы по меткам или Задайте вопрос