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


87

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

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তাই এটি অনুমান করে আমার কোনওভাবে পুনঃনির্দেশ এড়াতে সক্ষম হওয়া উচিত?

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

ধন্যবাদ!


4
আপনি কি ফাংশনগুলির জন্য es2015 সিনট্যাক্স ব্যবহার করার চেষ্টা করছেন?
এরিকার্ডসন

আপনি কোন ধরণের উপাদান তৈরি করছেন? রাষ্ট্রহীন? createClass?
মার্কথেথোমাস

আপনি কি নিশ্চিত করতে পারেন যে অনক্লিক আসলে আঘাত করছে upvote? এটি একটি প্রসঙ্গ সমস্যা হতে পারে।
thangngoc89

4
ব্যবহার করুনpreventDefault
onmyway133

4
e.PreventDefault () একা আমার পক্ষে কাজ করেছেন (প্রতিক্রিয়া 16.0.0-beta5)
ফেলিক্স-বি

উত্তর:


70

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

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

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

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

74

সমাধানটির একটি সম্পূর্ণ সংস্করণটি অনিক্লিকের অভ্যন্তরে পদ্ধতিটিকে উপস্থাপন করবে এবং ই পাস করবে এবং নেটিভ 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>);
{

E.preventDefault () এর মধ্যে কি পার্থক্য রয়েছে? ভিক্ষা বা ফাংশন শেষে? এটি আরও বোধ করা হয় যেখানে স্থাপন করা?
সারথেরিস স্টর্মহ্যামার

আমি মনে করি এটি শুরুতে ব্যবহার করা আরও ভাল
রোমান

এটি খারাপ অনুশীলন, দয়া করে .bind(this)একটি প্রতিক্রিয়ার অ্যাপ্লিকেশনটিতে একটি তীর ফাংশন এবং বিন প্রসঙ্গে পড়ুন। উদাহরণস্বরূপ: मध्यम.freecodecamp.org/…
আনন্দময়

এটি বাদ দিয়ে কেবল যুক্তিটি পাস করার জন্য একটি ফাংশন তৈরি করা হচ্ছে। আপনি যদি ইতিমধ্যে প্রতিক্রিয়া এবং ES6 ব্যবহার করে থাকেন তবে আপনার স্কোপড ফাংশনটির প্রয়োজন হবে না। এবং আপনি এটি সহজেই এটি কনস্ট্রাক্টরের সাথে আবদ্ধ করে এটি সম্পাদন করতে পারেন।
Iwnnay

সাবধান হন যে আপনি e.preventDefault () বলা করার আগে কোনও রেন্ডারিং (উদাহরণস্বরূপ রাষ্ট্র পরিবর্তন করে) ট্রিগার করলে এর কোনও প্রভাব পড়বে না। ইভেন্ট হ্যান্ডলারটির প্রথম বিবৃতি হিসাবে এটির চেয়ে ভাল।
থিম আনিনিসেন্স

16

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

 <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

}

9
এটি কোনও পার্থক্য করে না। আপনি উত্সাহ পাচ্ছেন কারণ লোকদের thisইভেন্ট হ্যান্ডলারটিতে এবং তাদের সম্পূর্ণ ভিন্ন সমস্যা রয়েছে।
দিমিতর নেস্টোরভ

8

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


4
এটি খারাপ অনুশীলন, দয়া করে .bind(this)একটি প্রতিক্রিয়ার অ্যাপ্লিকেশনটিতে একটি তীর ফাংশন এবং বিন প্রসঙ্গে পড়ুন। উদাহরণস্বরূপ: मध्यम.freecodecamp.org/…
আনন্দময়

createReactClass বা অটোবাইন্ডিং বা এনপিএম প্যাকেজ 'অটো-বাইন্ড' ব্যবহার করুন
xjinjin

7

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

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

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

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


2

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

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

এটি সুওরেটেড rated তোমার কিছু মনে না হলে আমি তোমাকে চুমুতে চাই আপনি আমাকে অনেক কিছু থেকে রক্ষা করেছেন স্যার। ফর্ম উপাদান action="javascript: false"জন্য কাজ করছে।
ওজগুরবাগি

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


1

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

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

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


4
আমি কি onClickপাসের প্রপ ফাংশন নাম হিসাবে ব্যবহার না করার পরামর্শ দেব , তবে handleClickপরিবর্তে এর মতো কিছু ? এটি বিভ্রান্তিকর, অন্যান্য কম অভিজ্ঞ বিকাশকারীরা মনে করতে পারে যে এটি উপাদানটির সাথে প্রকৃত সংযুক্ত ইভেন্ট, যদিও তা নয়। এছাড়াও, এটির সাহায্যে, আপনি প্রতিটি নতুন উপাদান তৈরি করছেন যা উপাদানগুলি পুনরায় রেন্ডার করে, এমনকি যদি এটি একই প্রপস গ্রহণ করে। এটি একটি খারাপ অনুশীলন হিসাবে বিবেচনা করা হয়।
#QueFaltaba

0

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

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

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

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


0

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

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

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

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

0

অ্যাঙ্কর ট্যাগগুলি এবং 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>

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


0

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

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

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

0

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

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

-1

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

.upvotes:before {
   content:"";
   float: left;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.