Настройка 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.

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


reactjs javascript forms form-submit onsubmit
person Lucas du Toit    schedule 12.02.2015    source источник

Ответы (4)


arrow_upward
126
arrow_downward

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

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}
person Henrik Andersson    schedule 12.02.2015
comment
Начиная с версии 0.13, возврат false из обработчиков событий будет игнорироваться, поэтому вам придется использовать e.preventDefault() или e.stopPropagation(). - person joshuaegclark; 13.02.2015
comment
Как ответили, последний предпочтительнее. - person Henrik Andersson; 13.02.2015
comment
Я думаю, ты имеешь в виду бывшего - person Shark Lasers; 07.04.2020
comment
@SharkLasers Этот комментарий был сделан к редактированию этого поста, который больше не доступен. - person Henrik Andersson; 08.04.2020
comment
Достаточно справедливо, вам, вероятно, следует удалять комментарии, когда они больше не актуальны. - person Shark Lasers; 08.04.2020

arrow_upward
51
arrow_downward

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

var OnSubmitTest = React.createClass({

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

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});
person Adam Stone    schedule 12.02.2015
comment
Это правильный способ использования формы в компоненте :) - person holms; 06.01.2017

arrow_upward
19
arrow_downward 

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

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

person Truong    schedule 01.06.2017

arrow_upward
5
arrow_downward

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

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

        return <form onSubmit={this.doSomething}>
        <button>Click me</button>
        </form>;
    }
});
person Bolza    schedule 12.02.2015
comment
В моем случае это работает с this и без него: {this.doSomething} или {doSomething} в порядке, потому что doSomething находится внутри render(). - person starikovs; 05.02.2016