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