React.js में onSubmit की स्थापना करना

Question

एक फॉर्म सबमिट करने पर, मैं doSomething()डिफ़ॉल्ट पोस्ट व्यवहार के बजाय कोशिश कर रहा हूं ।

स्पष्ट रूप से रिएक्ट में, ऑनसुबमिट रूपों के लिए एक समर्थित घटना है। हालाँकि, जब मैं निम्नलिखित कोड आज़माता हूँ:

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

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

विधि doSomething()चलाई जाती है, लेकिन उसके बाद भी, डिफ़ॉल्ट पोस्ट व्यवहार अभी भी किया जाता है।

आप मेरी jsfiddle में यह परीक्षण कर सकते हैं ।

मेरा प्रश्न: मैं डिफ़ॉल्ट पोस्ट व्यवहार को कैसे रोकूं?

Answer 1

अपने doSomething()फ़ंक्शन में, ईवेंट eऔर उपयोग में पास करें e.preventDefault()।

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

Comments

V0.13 के अनुसार, ईवेंट हैंडलर से झूठे रिटर्न को अनदेखा किया जाएगा, इसलिए आपको e.preventDefault () या

— e.stopPropagation

जैसा कि उत्तर दिया गया है, बाद वाला पसंद किया जाता है।

— हेनरिक एंडरसन 19

मुझे लगता है कि आपका मतलब पूर्व में है

— शार्क लेजर

@SharkLasers यह टिप्पणी इस पोस्ट के संपादन पर की गई थी जो अब उपलब्ध नहीं है।

— हेनरिक एंडरसन

उचित रूप से, आपको टिप्पणियों को संभवतः तब हटाना चाहिए जब वे अब प्रासंगिक नहीं हैं।

— शार्क लेजर

Answer 2

मैं यह भी सुझाव देना चाहता हूँ कि घटना सौंपनेवाला बाहर सौंपनेवाला।

var OnSubmitTest = React.createClass({

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

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

Comments

घटक में फॉर्म का उपयोग करने का यह उचित तरीका है :)

— Holms

Answer 3

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

यह मेरे लिए ठीक काम करता है

Answer 4

आप फ़ंक्शन के तर्क के रूप में ईवेंट को पास कर सकते हैं और फिर डिफ़ॉल्ट व्यवहार को रोक सकते हैं।

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

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

Comments

मेरे मामले में, यह बिना और के साथ काम करता है this: {this.doSomething}या {doSomething}ठीक है क्योंकि साथ doSomethingहै render()।

— 14