Đặt onSubmit trong React.js

97

Khi gửi biểu mẫu, tôi đang cố gắng doSomething()thay vì hành vi đăng bài mặc định.

Rõ ràng trong React, onSubmit là một sự kiện được hỗ trợ cho các biểu mẫu. Tuy nhiên, khi tôi thử mã sau:

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

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

Phương thức doSomething()được chạy, nhưng sau đó, hành vi đăng mặc định vẫn được thực hiện.

Bạn có thể kiểm tra điều này trong jsfiddle của tôi .

Câu hỏi của tôi: Làm cách nào để ngăn chặn hành vi đăng bài mặc định?

— Lucas du Toit
nguồn

118

Trong doSomething()chức năng của bạn , hãy vượt qua sự kiện evà sử dụng e.preventDefault().

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

— Henrik Andersson
nguồn

18

Tính đến v0.13, trả về false từ xử lý sự kiện sẽ bị bỏ qua, vì vậy bạn sẽ phải sử dụng e.preventDefault () hoặc e.stopPropagation ()

— joshuaegclark

1

Như đã trả lời, cái sau được ưu tiên hơn.

— Henrik Andersson

Tôi nghĩ ý bạn là người cũ

— Shark Lasers

@SharkLasers Nhận xét đó được đưa ra về một bản chỉnh sửa của bài đăng này đã không còn tồn tại.

— Henrik Andersson

Công bằng mà nói, bạn có thể nên xóa các bình luận khi chúng không còn phù hợp nữa.

— Shark Lasers

46

Tôi cũng khuyên bạn nên di chuyển trình xử lý sự kiện ra bên ngoài kết xuất.

var OnSubmitTest = React.createClass({

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

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

— Adam Stone
nguồn

1

Đây là cách thích hợp của việc sử dụng hình thức trong thành phần :)

— Holms

15

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

nó làm việc tốt cho tôi

— Truong
nguồn

5

Bạn có thể chuyển sự kiện làm đối số cho hàm và sau đó ngăn hành vi mặc định.

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

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

— Bolza
nguồn

2

Trong trường hợp của tôi, nó hoạt động khi có và không có this: {this.doSomething}hoặc {doSomething}ổn vì doSomethinglà withing render().

— starikovs