অন ক্লিকের প্রতিক্রিয়া জানুন এবং ডিফল্ট () লিঙ্কটি রিফ্রেশ / পুনর্নির্দেশের প্রতিরোধ করবেন?

Question 1

আমি প্রতিক্রিয়া সহ একটি লিঙ্ক রেন্ডার করছি:

render: ->
  `<a className="upvotes" onClick={this.upvote}>upvote</a>`

তারপরে, উপরে আমার আপভোট ফাংশন রয়েছে:

upvote: ->
  // do stuff (ajax)

লিঙ্কের আগে আমার সেই জায়গাটি ছড়িয়েছিল তবে আমার লিঙ্কে স্যুইচ করা দরকার এবং এখানে সমস্যাটি হচ্ছে - প্রতিবার .upvotesপৃষ্ঠাটিতে ক্লিক করলে সতেজ হয়ে যায়, আমি এখন পর্যন্ত যা চেষ্টা করেছি:

ইভেন্ট.প্রিভেন্টডিফল্ট () - কাজ করছে না।

upvote: (e) ->
  e.preventDefault()
  // do stuff (ajax)

ইভেন্ট.stopPropagation () - কাজ করছে না।

upvote: (e) ->
  e.stopPropagation()
  // do stuff (ajax)

মিথ্যা প্রত্যাবর্তন - কাজ না।

upvote: (e) ->
  // do stuff (ajax)
  return false

আমি আমার ইনডেক্স html এ jQuery ব্যবহার করে উপরের সমস্তগুলি চেষ্টা করে দেখেছি, তবে কিছুই কার্যকর বলে মনে হচ্ছে না। আমার এখানে কী করা উচিত এবং আমি কী ভুল করছি? আমি ইভেন্ট.টাইপ পরীক্ষা করে দেখেছি এবং clickতাই এটি অনুমান করে আমার কোনওভাবে পুনঃনির্দেশ এড়াতে সক্ষম হওয়া উচিত?

ক্ষমা করবেন, আমি যখন এক প্রতিক্রিয়া দেখি তখন প্রতিক্রিয়া আসে।

ধন্যবাদ!

Question 2

প্রতিক্রিয়া ইভেন্টগুলি আসলে সিন্থেটিক ইভেন্টস, নেটিভ ইভেন্টগুলি নয়। যেমনটি এখানে লেখা আছে :

ইভেন্ট প্রতিনিধি: প্রতিক্রিয়া আসলে নোডগুলির সাথে ইভেন্ট হ্যান্ডলারগুলিকে সংযুক্ত করে না। যখন প্রতিক্রিয়া শুরু হয়, এটি একক ইভেন্ট শ্রোতার সাহায্যে শীর্ষ স্তরের সমস্ত ইভেন্টের জন্য শোনা শুরু করে। যখন কোনও উপাদান মাউন্ট করা বা আনমাউন্ট করা হয়, ইভেন্ট হ্যান্ডলারগুলি কেবল অভ্যন্তরীণ ম্যাপিং থেকে যুক্ত বা সরানো হয়। যখন কোনও ইভেন্ট ঘটে তখন প্রতিক্রিয়া জানায় কীভাবে এই ম্যাপিংটি ব্যবহার করে এটি প্রেরণ করা যায়। যখন ম্যাপিংয়ে কোনও ইভেন্ট হ্যান্ডলার অবশিষ্ট থাকে না, তখন প্রতিক্রিয়াটির ইভেন্ট হ্যান্ডলারগুলি সাধারণ কোনও পছন্দ নয়।

ব্যবহার ব্যবহার করার চেষ্টা করুন Event.stopImmediatePropagation:

upvote: (e) ->
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();

Question 3

সমাধানটির একটি সম্পূর্ণ সংস্করণটি অনিক্লিকের অভ্যন্তরে পদ্ধতিটিকে উপস্থাপন করবে এবং ই পাস করবে এবং নেটিভ e.preventDefault () ব্যবহার করবে;

upvotes = (e, arg1, arg2, arg3 ) => {
    e.preventDefault();
    //do something...
}

render(){
    return (<a type="simpleQuery" onClick={ e => this.upvotes(e, arg1, arg2, arg3) }>
      upvote
    </a>);
{

Question 4

বাঁধার চেষ্টা করুন (এটি) যাতে আপনার কোডটি নীচের মত দেখাচ্ছে -

 <a className="upvotes" onClick={this.upvote.bind(this)}>upvote</a>

অথবা আপনি যদি এস in এ লিখছেন তবে কনস্ট্রাক্টরের উপাদানগুলির প্রতিক্রিয়া আপনি এটি করতে পারেন

constructor(props){
   super(props);
   this.upvote = this.upvote.bind(this);
}

upvote(e){   // function upvote
   e.preventDefault();
   return false

}

Question 5

রেন্ডার: -> <a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>

Question 6

এর মতো একটি প্রসঙ্গে

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

যেমন আপনি দেখতে পাচ্ছেন, আপনাকে স্পষ্টরূপে কন্ট্রোলডফাল্ট () কল করতে হবে। আমি মনে করি যে এই দস্তাবেজগুলি সহায়ক হতে পারে।

Question 7

একটি দুর্দান্ত এবং সহজ বিকল্প যা আমার পক্ষে কাজ করেছিল তা হ'ল:

<a href="javascript: false" onClick={this.handlerName}>Click Me</a>

Question 8

কারণ হ্যান্ডলারের সুযোগ নেই do প্রতিক্রিয়া নথি থেকে: ডকুমেন্টেশন প্রতিক্রিয়া

"অটোবাইন্ডিং" বিভাগটি পরীক্ষা করুন। আপনার হ্যান্ডলারটি লিখতে হবে: অনক্লিক = () => {}

Question 9

আমি যে গিস্টটি পেয়েছি এবং আমার পক্ষে কাজ করে:

const DummyLink = ({onClick, children, props}) => (
    <a href="#" onClick={evt => {
        evt.preventDefault();
        onClick && onClick();
    }} {...props}>
        {children}
    </a>
);

এসআরএফের জন্য ক্রেডিট https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53

Question 10

যদি আপনি চেকবক্স ব্যবহার করেন

<input 
    type='checkbox'
    onChange={this.checkboxHandler}
/>

স্টপপ্রোপেশন এবং স্টপআইমিটারিপ্রোপেশন কাজ করবে না।

কারণ আপনি ব্যবহার আবশ্যক onClick = {this.checkboxHandler}

Question 11

আপনি যদি প্রতিক্রিয়া রাউটার ব্যবহার করেন তবে আমি প্রস্তাব করব যে রিয়ে্যাক্ট-রাউটার-বুটস্ট্র্যাপ লাইব্রেরিতে সন্ধান করা উচিত যার একটি সহজ উপাদান লিংকন্টেইনার রয়েছে। এই উপাদানটি ডিফল্ট পৃষ্ঠা পুনরায় লোডকে বাধা দেয় যাতে আপনার ইভেন্টটির সাথে ডিল করতে হবে না।

আপনার ক্ষেত্রে এটি দেখতে এরকম কিছু হতে পারে:

import { LinkContainer } from 'react-router-bootstrap';

<LinkContainer to={givePathHere}>
    <span className="upvotes" onClick={this.upvote}>upvote</span>
</LinkContainer>

Question 12

অ্যাঙ্কর ট্যাগগুলি এবং preventDefaultঅতীতে আমার কিছুটা সমস্যা হয়েছিল এবং আমি কী ভুল করছি তা সবসময় ভুলে যাই, তাই আমি যা বুঝলাম তা এখানে।

আমার প্রায়শই সমস্যাটি হ'ল আমি উপাদানটির বৈশিষ্ট্যগুলি অন্যান্য প্রতিক্রিয়া উপাদানগুলির মতো সরাসরি বিনষ্ট করে অ্যাক্সেস করার চেষ্টা করি । এটি কাজ করবে না, পৃষ্ঠাটি পুনরায় লোড হবে , এমনকি এটি সহ e.preventDefault():

function (e, { href }) {
  e.preventDefault();
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

দেখে মনে হচ্ছে যে ধ্বংসটি একটি ত্রুটি সৃষ্টি করে ( Cannot read property 'href' of undefined) যা কনসোলে প্রদর্শিত হয় না, সম্ভবত পৃষ্ঠা সম্পূর্ণ পুনরায় লোডের কারণে। যেহেতু ফাংশন ত্রুটিযুক্ত, তাইpreventDefault হয় না। যদি href # হয় তবে ত্রুটিটি সঠিকভাবে প্রদর্শিত হবে যেহেতু প্রকৃত পুনরায় লোড নেই।

আমি এখন বুঝতে পারি যে আমি কেবলমাত্র কাস্টম প্রতিক্রিয়া উপাদানগুলিতে দ্বিতীয় হ্যান্ডলার যুক্তি হিসাবে বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারি, নেটিভ এইচটিএমএল ট্যাগগুলিতে নয় । অবশ্যই, কোনও ইভেন্টে এইচটিএমএল ট্যাগ বৈশিষ্ট্য অ্যাক্সেস করতে এই উপায় হবে:

function (e) {
  e.preventDefault();
  const { href } = e.target;
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

আমি আশা করি এটি আমার মতো অন্যান্য লোককে ত্রুটি না দেখিয়ে আশ্চর্য হয়ে যায়!

Question 13

আমি এই পৃষ্ঠায় আসার সময় আমার কাছে উল্লিখিত বিকল্পগুলির সঠিক হতে বা আমার পক্ষে কাজ করার কোনও সন্ধান পাইনি। তারা আমাকে জিনিসগুলি পরীক্ষা করার জন্য ধারণা দেয় এবং আমি দেখতে পেয়েছি যে এটি আমার জন্য কাজ করেছে।

dontGoToLink(e) {
  e.preventDefault();
 }

render() {
  return (<a href="test.com" onClick={this.dontGoToLink} />});
}

Question 14

খাঁটি জেএস যেমন প্রতিরোধের ডিফল্ট করেন: ক্লাসে আপনার এটি হ্যান্ডলার পদ্ধতি তৈরি করা উচিত:

handler(event) {
    event.preventDefault();
    console.log(event);
}

Question 15

এই পদ্ধতির কোনওটিই আমার পক্ষে কাজ করে নি, তাই আমি কেবল এটি CSS এর মাধ্যমে সমাধান করেছি:

.upvotes:before {
   content:"";
   float: left;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
}

অন ​​ক্লিকের প্রতিক্রিয়া জানুন এবং ডিফল্ট () লিঙ্কটি রিফ্রেশ / পুনর্নির্দেশের প্রতিরোধ করবেন?

অন ক্লিকের প্রতিক্রিয়া জানুন এবং ডিফল্ট () লিঙ্কটি রিফ্রেশ / পুনর্নির্দেশের প্রতিরোধ করবেন?