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

97

При отправке формы я пытаюсь 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 .

Мой вопрос: как предотвратить стандартное поведение публикации?

— Лукас дю Туа
источник

119

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

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}

— Хенрик Андерссон
источник

18

Начиная с версии v0.13, возвращение false из обработчиков событий будет игнорироваться, поэтому вам придется использовать e.preventDefault () или e.stopPropagation ()

— joshuaegclark

1

Как было сказано, последнее предпочтительнее.

— Хенрик Андерссон,

Я думаю, вы имеете в виду первое

— Shark Lasers

@SharkLasers Этот комментарий был сделан к редактированию этого сообщения, которое больше не доступно.

— Хенрик Андерссон,

Честно говоря, вам, вероятно, следует удалить комментарии, когда они больше не актуальны.

— Shark Lasers,

46

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

var OnSubmitTest = React.createClass({

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

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});

— Адам Стоун
источник

1

Это правильный способ использования формы в компоненте :)

— holms

15

<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

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

— Чыонг
источник

5

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

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

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

— Больца
источник

2

В моем случае, она работает с и без this: {this.doSomething}или {doSomething}это нормально , потому что doSomethingэто жгутов render().

— Стариков 05