Thiết lập onSubmit trong React.js

Question

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

Rõ ràng trong phản ứng, onSubmit is a supported event for forms. Tuy nhiên, khi tôi thử đoạn mã sau:

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

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

Phương pháp doSomething() đang chạy, nhưng sau đó, hành vi bài mặc định vẫn tiến hành.

Bạn có thể kiểm tra điều này trong số jsfiddle của mình.

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

Answer 1

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

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

Answer 2

Bạn có thể chuyển sự kiện làm đối số cho hàm và sau đó ngăn chặ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>; 
    } 
}); 

Answer 3

Tôi cũng khuyên bạn nên di chuyển trình xử lý sự kiện ra ngoài hiển thị.

var OnSubmitTest = React.createClass({ 

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

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

Answer 4

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

nó hoạt động tốt cho tôi