রেন্ডারে অনক্লিক ফাংশন অগ্নি প্রতিক্রিয়া

Question

আমি একটি সন্তানের উপাদানগুলিতে 2 মান পাস করি:

1. প্রদর্শিত বস্তুর তালিকা
2. ফাংশন মুছুন।

আমি আমার অবজেক্টের তালিকা প্রদর্শন করার জন্য 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>

=> অ্যারো ফাংশন নামে পরিচিত যা ES6 এ প্রবর্তিত হয়েছিল এবং এটি 0.13.3 বা উচ্চতর প্রতিক্রিয়াতে সমর্থিত হবে।

Comments

কফিস্ক্রিপ্টে এটি কিভাবে করবেন?

— vipin8169

আপনি এই তীর ফাংশন কোঁকড়া ধনুর্বন্ধনী এড়াতে পারেন। যা আমি বিশ্বাস করি সর্বোত্তম অনুশীলনের সাথে মেলে:onClick={() => this.props.removeTaskFn(todo)}

— এস্পেড্রা

আপনি দয়া করে এই আরও কিছু ব্যাখ্যা করতে পারেন? আমি পেয়েছি যে লোকেরা বলছে এটি সর্বোত্তম অনুশীলন নয় তবে আমি এখানে () => এর সাথে ঠিক কী ঘটছে তা বুঝতে চাই যে একটি তীর ফাংশন কী তা নয় তবে এটি () কী এবং কেন এটি খারাপ?

— wuno

@ উইনো দ্য () হ'ল আপনার বেনামে ফাংশনের পরামিতি। এটি এখানে খালি কারণ আমরা কোনও পরামিতিগুলিতে যাচ্ছি না। কল্পনা করুন যে () হ'ল ফাংশনের ()। এখন রেন্ডার () ফাংশনে বাঁধার জন্য কেন এটি সর্বোত্তম অনুশীলন নয় তা সম্পর্কিত কারণ প্রতিটি রেন্ডারে আমরা ফাংশনটিকে সেই উপাদানটিতে পুনরায় রিমান্ড করছি যা খুব ব্যয়বহুল হতে পারে।

— জায়েসন্ডার

এই টুইটটি আমার পছন্দ নয় অনেক অনেক ধন্যবাদ

— এম। Wiśnicki

Answer 2

ফাংশনটি কল করার পরিবর্তে ফাংশনের সাথে মানটি বাঁধুন:

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

MDN রেফ: https://developer.mozilla.org/en/docs/Web/JavaScript/ উল্লেখ / গ্লোবাল_অবজেক্টস / ফাংশন / বাইন্ড

Comments

আইএমএইচও এবং আরও অনেকে। আবদ্ধ বা বাঁধাইয়ের তুলনায় আপনার স্টেটলেস ফাংশনগুলির পক্ষে হওয়া উচিত কারণ এগুলি আপনাকে অনাকাঙ্ক্ষিত পার্শ্ব প্রতিক্রিয়া হতে পারে। সুতরাং, এমনকি উভয় উত্তর সঠিক হওয়া, আমি বিশ্বাস করি যে একজন অন্যটির চেয়ে আরও বেশি অংশীদার।

— সসপেড্রা

উপাদান বা অন্য যে কোনও জায়গায় রেন্ডারে সরাসরি বাঁধাই পুনরায় সংশোধন করা হয় না। বাঁধাই সর্বদা কনস্ট্রাক্টারে হওয়া উচিত

— হেমাদ্রি দাসারি

Answer 3

আপনার onClickবৈশিষ্ট্যের মানটি একটি ফাংশন হওয়া উচিত, কোনও ফাংশন কল নয়।

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

Comments

রেন্ডারের অভ্যন্তরে ইভেন্ট কলগুলিতে বেনামী ফাংশন ব্যবহার করবেন না - এটি অন্য রেন্ডারটিকে ট্রিগার করবে

— স্প্লিনেক্স

Answer 4

যারা তীর ফাংশন ব্যবহার করছেন না বরং কিছু সহজ ব্যবহার করছেন ... তাদের জন্য আমার সাইনআউট ফাংশনের পরে প্রথম বন্ধনী যুক্ত করার সময় আমি এর মুখোমুখি হয়েছি ...

এটি প্রতিস্থাপন <a onClick={props.signOut()}>Log Out</a>

এর সাথে <a onClick={props.signOut}>Log Out</a>...! 😆

Comments

আসলে এটি আমার পক্ষে মোটেই কাজ করছে না। আমি ফাংশনটি পাস করেছি এবং কখনই বন্ধনী যুক্ত করি নি এবং এটি এখনও রেন্ডারে চালিত হয়। ফেব্রুয়ারী '19-এর পরে এটি পরিবর্তন হয়েছে কিনা তা নিশ্চিত নন তবে লং এনগুইনের মতো বিশাল ফাংশন নির্ধারণের ফলে এবং বিশাল বিশটের উত্তর বিষয়টি সমাধান করেছে।

— বিটশিফট

Answer 5

জেএসএক্সকে রিএ্যাকটিজেএস ব্যবহার করা হয় কারণ এটি HTML এর সাথে খুব মিল এবং এটি প্রোগ্রামারদের এইচটিএমএল ব্যবহার করার অনুভূতি দেয় যেখানে এটি শেষ পর্যন্ত জাভাস্ক্রিপ্ট ফাইলটিতে স্থানান্তর করে।

একটি লুপ লেখার জন্য এবং function this.props.removeTaskFunction (টুডো) ​​হিসাবে নির্দিষ্ট ফাংশন নির্দিষ্ট করে যখনই লুপটি ট্রিগার করা হবে তখন ফাংশনগুলি সম্পাদন করবে।

এই আচরণটি থামাতে আমাদের ফাংশনটি অনক্লিকটিতে ফিরে আসতে হবে।

চর্বিযুক্ত তীর ফাংশনটির বাইন্ড প্রোপার্টি সহ একটি লুকানো রিটার্ন স্টেটমেন্ট থাকে । এইভাবে এটি জাভাস্ক্রিপ্ট ফাংশনও ফিরে আসতে পারে হিসাবে অনক্লিক ফাংশন ফেরত !!!!!

ব্যবহার -

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

এটি আমার জন্য বিষয়টি স্থির করেছে।