प्रतिक्रिया पर क्लिक करें और निवारण () लिंक ताज़ा / पुनर्निर्देशित?

Question 1

मैं प्रतिक्रिया के साथ एक लिंक दे रहा हूँ:

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

फिर, ऊपर मेरे पास अपवोट फंक्शन है:

upvote: ->
  // do stuff (ajax)

लिंक से पहले मेरे पास उस स्थान पर स्पैन था, लेकिन मुझे लिंक करने के लिए स्विच करने की आवश्यकता है और यहां परेशानी है - हर बार जब मैं .upvotesपृष्ठ पर क्लिक करता हूं तो वह ताज़ा हो जाता है, मैंने अब तक क्या कोशिश की है:

event.preventDefault () - काम नहीं कर रहा है।

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

event.stopPropagation () - काम नहीं कर रहा है।

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

झूठे लौटना - काम नहीं करना।

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

मैंने भी अपने index.html में jQuery का उपयोग करके उपरोक्त सभी की कोशिश की है, लेकिन कुछ भी काम नहीं करता है। मुझे यहां क्या करना चाहिए और मैं क्या कर रहा हूं? मैंने Event.type की जाँच की है और ऐसा clickलगता है कि मुझे लगता है कि मुझे किसी भी तरह अनुप्रेषित करने से बचना चाहिए?

माफ करना, जब मैं रिएक्ट की बात करता हूं तो मैं बदमाश हूं।

धन्यवाद!

Question 2

रिएक्ट इवेंट वास्तव में सिंथेटिक इवेंट हैं, न कि नेटिव इवेंट। जैसा कि यहाँ लिखा गया है :

ईवेंट प्रतिनिधिमंडल: रिएक्ट वास्तव में ईवेंट हैंडलर को नोड्स में संलग्न नहीं करता है। जब प्रतिक्रिया शुरू होती है, तो यह एकल ईवेंट श्रोता का उपयोग करके शीर्ष स्तर पर सभी घटनाओं के लिए सुनना शुरू कर देता है। जब किसी घटक को माउंट या अनमाउंट किया जाता है, तो ईवेंट हैंडलर्स को केवल आंतरिक मैपिंग से जोड़ा या हटाया जाता है। जब कोई घटना होती है, तो रिएक्ट जानता है कि इस मैपिंग का उपयोग करके इसे कैसे भेजा जाए। जब मैपिंग में कोई इवेंट हैंडलर नहीं बचता है, तो रिएक्ट के ईवेंट हैंडलर सरल नो-ऑप्स होते हैं।

उपयोग करने का प्रयास करें Event.stopImmediatePropagation:

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

Question 3

समाधान का एक पूर्ण संस्करण onClick, ई पास करने और देशी 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>

या यदि आप निर्माण में es6 प्रतिक्रिया घटक में लिख रहे हैं तो आप ऐसा कर सकते हैं

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

इसका कारण यह है कि उन हैंडलर गुंजाइश को संरक्षित नहीं करते हैं। प्रतिक्रिया प्रलेखन से: प्रतिक्रिया प्रलेखन

"नो ऑटोबाइंडिंग" अनुभाग देखें। आपको हैंडलर लिखना चाहिए: onClick = () => {}

Question 9

मैंने जो गिस्ट पाया और मेरे लिए काम किया:

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

क्रेडिट के लिए srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53

Question 10

यदि आप चेकबॉक्स का उपयोग करते हैं

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

stopPropagation और stopImmediatePropagation काम नहीं करेंगे।

क्योंकि आपको 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 # है, तो कोई वास्तविक पुनः लोड नहीं होने के कारण त्रुटि ठीक से प्रदर्शित होती है।

अब मैं समझता हूं कि मैं केवल कस्टम रिएक्ट घटकों पर एक दूसरे हैंडलर तर्क के रूप में विशेषताओं का उपयोग कर सकता हूं, देशी HTML टैग्स पर नहीं । तो निश्चित रूप से, एक घटना में HTML टैग विशेषता तक पहुँचने के लिए, यह तरीका होगा:

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

इन विधियों में से किसी ने भी मेरे लिए काम नहीं किया, इसलिए मैंने इसे CSS के साथ हल किया:

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