प्रतिक्रिया पर क्लिक करें रेंडर पर आग समारोह

Question

मैं एक बच्चे के घटक के लिए 2 मान पास करता हूं:

1. प्रदर्शित करने के लिए वस्तुओं की सूची
2. फ़ंक्शन हटाएं।

मैं अपनी सूची की वस्तुओं को प्रदर्शित करने के लिए एक .map () फ़ंक्शन का उपयोग करता हूं (जैसे कि प्रतिक्रिया ट्यूटोरियल पेज में दिए गए उदाहरण में), लेकिन उस घटक में बटन onClickरेंडर पर कार्य करता है, (यह रेंडर समय पर आग नहीं होना चाहिए)। मेरा कोड इस तरह दिखता है:

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

मेरा सवाल है: क्यों onClickरेंडर पर कार्य आग है और यह कैसे नहीं बनाने के लिए?

Answer 1

क्योंकि आप उस फ़ंक्शन को ऑनक्लिक करने के बजाय उस फ़ंक्शन को कॉल कर रहे हैं, उस लाइन को इस पर बदलें:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> एरो फंक्शन कहा जाता है, जिसे ईएस 6 में पेश किया गया था, और यह रिएक्ट 0.13.3 या ऊपरी पर समर्थित होगा।

Comments

इसे कैसे करें?

— विपिन v१६

आप इन एरो फंक्शन कर्ली ब्रेसेस से भी बच सकते हैं। जो मैं सबसे अच्छी प्रथाओं से मेल खाता हूं:onClick={() => this.props.removeTaskFn(todo)}

— sospedra

क्या आप इसे थोड़ा और समझाएंगे? मुझे लगता है कि लोग कहते रहते हैं कि यह सबसे अच्छा अभ्यास नहीं है, लेकिन मैं यह समझना चाहूंगा कि वास्तव में यहां क्या हो रहा है () => मैं समझता हूं कि एक तीर का कार्य क्या है लेकिन यह नहीं कि यह क्या है () और यह क्यों बुरा है?

— वूनो

@wuno The () आपके अनाम फ़ंक्शन का पैरामीटर है। यह यहाँ खाली है क्योंकि हम किसी भी पैरामीटर में नहीं जा रहे हैं। कल्पना कीजिए कि () फ़ंक्शन का () है। अब इस बारे में कि रेंडर () फ़ंक्शन में बाइंडिंग के लिए यह सबसे अच्छा अभ्यास क्यों नहीं है क्योंकि हर रेंडर पर, हम फ़ंक्शन को घटक को रिबंड कर रहे हैं, जो बहुत महंगा हो सकता है।

— jaysonder

@LongNguyen यह मैं क्या देख रहा हूँ! बहुत बहुत धन्यवाद

— M. Wi anicki

Answer 2

फ़ंक्शन को कॉल करने के बजाय, फ़ंक्शन को मान बाँधें:

this.props.removeTaskFunction.bind(this, todo)

MDN Ref: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Comments

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

— sospedra

रेंडर में या कंपोनेंट में कहीं भी डायरेक्ट बाइंडिंग की सिफारिश नहीं की गई है। बाइंडिंग हमेशा कंस्ट्रक्टर में होनी चाहिए

— हेमाद्रि दसारी

Answer 3

आपकी onClickविशेषता के लिए मान एक फ़ंक्शन होना चाहिए, न कि फ़ंक्शन कॉल।

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>

Comments

रेंडर के अंदर ईवेंट कॉल पर अनाम फ़ंक्शंस का उपयोग न करें - यह एक और रेंडर को ट्रिगर करेगा

— Splynx

Answer 4

उन लोगों के लिए जो तीर के कार्यों का उपयोग नहीं कर रहे हैं, लेकिन कुछ सरल हैं ... मैंने अपने साइनऑउट फ़ंक्शन के बाद कोष्ठक जोड़ते समय इसका सामना किया ...

इसे बदलें <a onClick={props.signOut()}>Log Out</a>

इसके साथ <a onClick={props.signOut}>Log Out</a>...! 😆

Comments

वास्तव में यह मेरे लिए बिल्कुल भी काम नहीं कर रहा है। मैंने फंक्शन पास किया और कभी भी कोष्ठक नहीं जोड़ा और यह अभी भी रेंडर पर निकाल दिया गया है। यकीन नहीं होता कि यह फरवरी 19 से बदल गया है, लेकिन लांग गुयेन और विशाल बिष्ट के जवाब की तरह एक फ़ंक्शन असाइन करना इस मुद्दे को तय करता है।

— बिटशिफ्ट

Answer 5

JSX का उपयोग ReactJS के साथ किया जाता है क्योंकि यह HTML से बहुत मिलता-जुलता है और यह प्रोग्रामर को HTML का उपयोग करने का एहसास दिलाता है, जबकि यह अंततः एक जावास्क्रिप्ट फाइल में ट्रांसपाइल करता है।

फॉर-लूप लिखना और फ़ंक्शन को {this.props.removeTaskFunction (टूडू)} के रूप में लिखना जब भी लूप ट्रिगर होता है, फंक्शंस को निष्पादित करेगा।

इस व्यवहार को रोकने के लिए हमें फ़ंक्शन को ऑनक्लिक पर वापस करने की आवश्यकता है।

वसा तीर फ़ंक्शन में बाइंड प्रॉपर्टी के साथ एक छिपा हुआ रिटर्न स्टेटमेंट होता है । इस प्रकार यह फ़ंक्शन को OnClick पर लौटाता है क्योंकि जावास्क्रिप्ट फ़ंक्शंस को भी लौटा सकता है !!!!!

उपयोग -

onClick={() => { this.props.removeTaskFunction(todo) }}

जिसका मतलब है-

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);

Answer 6

JSX घुंघराले ब्रेस में जावास्क्रिप्ट भाव का मूल्यांकन करेगा

इस स्थिति में, this.props.removeTaskFunction(todo)आह्वान किया जाता है और रिटर्न मान को सौंपा जाता हैonClick

आपको जो प्रदान करना है onClickवह एक फ़ंक्शन है। ऐसा करने के लिए, आप एक अनाम फ़ंक्शन में मान को लपेट सकते हैं।

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});

Answer 7

मेरे पास समान मुद्दा था, मेरा कोड था:

function RadioInput(props) {
    return (
    <div className="form-check form-check-inline">
        <input className="form-check-input" type="radio" name="inlineRadioOptions" id={props.id} onClick={props.onClick} value={props.label}></input>
        <label className="form-check-label" htmlFor={props.id}>{props.label}</label>
    </div>
    );
  }
class ScheduleType extends React.Component
{
    renderRadioInput(id,label)
    {
        id = "inlineRadio"+id;
        return(
            <RadioInput
                id = {id}
                label = {label}
                onClick = {this.props.onClick}
            />
        );

    }

यह कहां होना चाहिए

onClick = {() => this.props.onClick()}

में RenderRadioInput

इसने मेरे लिए मुद्दा तय कर दिया।