React.js এ সাবস্মিট সেট করা হচ্ছে

Question

একটি ফর্ম জমা দেওয়ার সময়, আমি doSomething()ডিফল্ট পোস্ট আচরণের পরিবর্তে চেষ্টা করছি ।

দৃশ্যত প্রতিক্রিয়াতে, অনসামিত ফর্মগুলির জন্য একটি সমর্থিত ইভেন্ট for তবে, যখন আমি নিম্নলিখিত কোডটি চেষ্টা করি:

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 () ব্যবহার করতে হবে

— জোশুয়ায়েগ্লার্ক

উত্তর হিসাবে, দ্বিতীয়টি পছন্দ করা হয়।

— হেনরিক অ্যান্ডারসন

আমি মনে করি আপনি প্রাক্তনটিকে বোঝাচ্ছেন

— শার্ক লেজারগুলি

@ শার্কলিজার্স এই মন্তব্যটি এই পোস্টের সম্পাদনায় করা হয়েছিল যা আর উপলভ্য নয়।

— হেনরিক অ্যান্ডারসন

যথেষ্ট ভাল, আপনার সম্ভবত মন্তব্যগুলি মুছে ফেলা উচিত যখন তারা আর প্রাসঙ্গিক না হয়।

— শার্ক লেজারগুলি

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

উপাদানটিতে ফর্মটি ব্যবহারের এটি সঠিক পদ্ধতি :)

— হোমস

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()।

— স্টারিকভগুলি