Установка onSubmit в React.js

Question

Установка onSubmit в React.js

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

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

var OnSubmitTest = React.createClass({

    render: function() {

        doSomething = function(){

           alert('it works!');

        }



        return <form onSubmit={doSomething}>

        <button>Click me</button>

        </form>;

    }

});

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

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

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

694 4

javascript reactjs forms form-submit

4 ответов:

Comments

Ничего не найдено.

Henrik Andersson · Accepted Answer · 2016-03-07 16:11:57

в своем

85

2016-03-07 16:11:57

Adam Stone · Accepted Answer · 2015-02-12 17:04:09

Я бы также предложил переместить обработчик событий за пределы рендеринга.
var OnSubmitTest = React.createClass({

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

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

Truong · Accepted Answer · 2017-06-01 12:55:40

<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>
он отлично работает для меня

Bolza · Accepted Answer · 2015-09-02 18:18:39

вы можете передать событие в качестве аргумента функции, а затем предотвратить поведение по умолчанию.
var OnSubmitTest = React.createClass({
        render: function() {
        doSomething = function(event){
           event.preventDefault();
           alert('it works!');
        }

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