การตั้งค่า 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

คำถามของฉัน: ฉันจะป้องกันพฤติกรรมการโพสต์เริ่มต้นได้อย่างไร

ในคุณdoSomething()ฟังก์ชั่นผ่านในเหตุการณ์และการใช้งานee.preventDefault()

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

ฉันขอแนะนำให้ย้ายตัวจัดการเหตุการณ์ออกนอกการเรนเดอร์

var OnSubmitTest = React.createClass({

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

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

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

มันทำงานได้ดีสำหรับฉัน

คุณสามารถส่งผ่านเหตุการณ์เป็นอาร์กิวเมนต์ไปยังฟังก์ชันแล้วป้องกันพฤติกรรมเริ่มต้น

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

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