Налаштування 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 .

Моє запитання: Як запобігти поведінці публікацій за замовчуванням?

Відповіді:


118

У своїй 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().
starikovs
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.