ReactJS কল প্যারেন্ট পদ্ধতি

Question

আমি রিএ্যাকটিজেএসে আমার প্রথম পদক্ষেপ নিচ্ছি এবং পিতা-মাতা এবং বাচ্চাদের মধ্যে যোগাযোগ বোঝার চেষ্টা করছি। আমি ফর্ম তৈরি করছি, তাই আমার স্টাইলিং ক্ষেত্রগুলির জন্য উপাদান রয়েছে। এবং আমার প্যারেন্ট উপাদান রয়েছে যা ক্ষেত্র এবং এটি পরীক্ষা করে। উদাহরণ:

var LoginField = React.createClass({
    render: function() {
        return (
            <MyField icon="user_icon" placeholder="Nickname" />
        );
    },
    check: function () {
        console.log ("aakmslkanslkc");
    }
})

var MyField = React.createClass({
    render: function() {
...
    },
    handleChange: function(event) {
//call parent!
    }
})

এটা করতে কোন উপায় আছে কি. এবং আমার যুক্তিটি কি "বিশ্ব" প্রতিক্রিয়াতে ভাল? আপনার সময় জন্য ধন্যবাদ।

Answer 1

এটি করার জন্য আপনি সন্তানের কাছে পিতামাতার কাছ থেকে সম্পত্তি হিসাবে কলব্যাক দিন।

উদাহরণ স্বরূপ:

var Parent = React.createClass({

    getInitialState: function() {
        return {
            value: 'foo'
        }
    },

    changeHandler: function(value) {
        this.setState({
            value: value
        });
    },

    render: function() {
        return (
            <div>
                <Child value={this.state.value} onChange={this.changeHandler} />
                <span>{this.state.value}</span>
            </div>
        );
    }
});

var Child = React.createClass({
    propTypes: {
        value:      React.PropTypes.string,
        onChange:   React.PropTypes.func
    },
    getDefaultProps: function() {
        return {
            value: ''
        };
    },
    changeHandler: function(e) {
        if (typeof this.props.onChange === 'function') {
            this.props.onChange(e.target.value);
        }
    },
    render: function() {
        return (
            <input type="text" value={this.props.value} onChange={this.changeHandler} />
        );
    }
});

উপরের উদাহরণে, Parentকল Childএকটি সম্পত্তি সঙ্গে valueএবং onChange। Childবিনিময়ে একটি binds onChangeএকটি মান হ্যান্ডলার <input />উপাদান এবং মান আপ পাসের Parentএর কলব্যাক যদি এটা সংজ্ঞায়িত হচ্ছে।

ফলস্বরূপ Parentএর ক্ষেত্র changeHandlerথেকে স্ট্রিংয়ের মান হিসাবে প্রথম আর্গুমেন্টের সাথে এর পদ্ধতিটি ডাকা হয় । ফলাফলটি হ'ল এর রাষ্ট্রটি সেই মানটির সাথে আপডেট করা যায়, যার ফলে আপনি যখন ইনপুট ক্ষেত্রে টাইপ করেন তখন পিতামাতার উপাদানটি নতুন মানের সাথে আপডেট হয় ।<input />ChildParent<span />Child

Comments

আমি মনে করি আপনি সন্তানের হাতে দেওয়ার আগে পিতামাতার কাজটি বাঁধতে হবে:<Child value={this.state.value} onChange={this.changeHandler.bind(this)} />

— o01

@ o01 না আপনি করবেন না কারণ আমি ব্যবহার করছি React.createClassযা অটো সমস্ত উপাদান পদ্ধতি আবদ্ধ করে। যদি আমি রিয়েট এস classes ক্লাস ব্যবহার করতাম তবে আপনাকে এটির আবদ্ধ করতে হবে (যদি আপনি কনস্ট্রাক্টরটিতে স্বতঃ-বাধ্যতামূলক না হন যা এই দিনগুলিতে প্রচুর লোকেরা আজকের দিনে এটি করছে)

— মাইক ড্রাইভার

@ মাইকড্রাইভার আমি দেখছি আপনি কি জানেন না এটি ECMAScript 6 টি ক্লাস (যা আমি) ব্যবহার করে সীমাবদ্ধ। এছাড়াও সচেতন ছিল না প্রতিক্রিয়া দলটি কনস্ট্রাক্টরে অটো বাঁধাইয়ের পরামর্শ দেয়।

— o01

তারা সুপারিশ করে কিনা আমি জানি না, তবে এটি আমার কাছে দেখতে সাধারণ জিনিস বলে মনে হচ্ছে। এটি রেন্ডার থ্রেডের সাথে আবদ্ধ স্থাপনের চেয়ে আমার কাছে আরও অর্থবোধ করে, কারণ .bindএকটি নতুন ফাংশন দেয় কারণ মূলত আপনি প্রতিবার যখন রেন্ডার করবেন তখন একটি নতুন ফাংশন তৈরি করছেন। এটি সম্ভবত ঠিক আছে তবে আপনি যদি কনস্ট্রাক্টরের সাথে আবদ্ধ হন তবে প্রতিটি রেন্ডারের চেয়ে ইনস্ট্যান্টেশনে আপনি কেবল উপাদান উপাদান প্রতি একবার এটি করছেন। এটি নিট-পিকিং ... তবে প্রযুক্তিগতভাবে আমি ভাল অনুমান করি!

— মাইক ড্রাইভার

@ ডেভিডলাই-গাগনন উদাহরণটিতে ভালভাবে এটি সংজ্ঞায়িত হতে পারে কারণ আমি প্রোপটাইপটিতে প্রয়োজনীয়তা অর্জন করি নি। তবে হ্যাঁ আপনি এটি করতে পারেন বা এটির পরিবর্তে সংজ্ঞা দেওয়া হয়েছে কিনা তা পরীক্ষা করতে পারেন।

— মাইক ড্রাইভার

Answer 2

আপনি যে কোনও পিতামাতার পদ্ধতি ব্যবহার করতে পারেন। এর জন্য আপনার কোনও সাধারণ মানের মতো আপনার সন্তানের কাছে এই পদ্ধতিগুলি আপনার পিতা মাতার কাছ থেকে প্রেরণ করা উচিত। এবং আপনি পিতা-মাতার কাছ থেকে একসাথে অনেকগুলি পদ্ধতি ব্যবহার করতে পারেন। উদাহরণ স্বরূপ:

var Parent = React.createClass({
    someMethod: function(value) {
        console.log("value from child", value)
    },
    someMethod2: function(value) {
        console.log("second method used", value)
    },
    render: function() {
      return (<Child someMethod={this.someMethod} someMethod2={this.someMethod2} />);
    }
});

এবং এটিকে শিশু হিসাবে এটি ব্যবহার করুন (কোনও ক্রিয়া বা কোনও শিশু পদ্ধতিতে):

var Child = React.createClass({
    getInitialState: function() {
      return {
        value: 'bar'
      }
    },
    render: function() {
      return (<input type="text" value={this.state.value} onClick={this.props.someMethod} onChange={this.props.someMethod2} />);
    }
});

Comments

উজ্জ্বল উত্তর। আপনি এই পদ্ধতিগুলির মতো পদ্ধতিগুলি পাস করার কোনও ধারণা নেই, আমি এটি অর্জনের জন্য রেফ ব্যবহার করছি!

— পল রেডমন্ড

আমি কলব্যাক পেয়েছি শিশুটি কল করতে কিন্তু সেখানে this.propsকলব্যাক হয়ে যায় undefined।

— খতিব

আপনার এই this

— কলব্যাকটি

হাই ভ্যালেন্টিন পেটকভ স্বাগত!

— ভিটালি অ্যান্ড্রুশিন

Answer 3

প্রতিক্রিয়া 16+ এবং ES6 সহ 2019 আপডেট

যেহেতু এটি পোস্ট করা হচ্ছে React.createClassপ্রতিক্রিয়া সংস্করণ 16 এবং এটিকে নতুন জাভাস্ক্রিপ্ট ES6 থেকে আপনাকে আরও সুবিধা দিবে।

মাতা

import React, {Component} from 'react';
import Child from './Child';
  
export default class Parent extends Component {

  es6Function = (value) => {
    console.log(value)
  }

  simplifiedFunction (value) {
    console.log(value)
  }

  render () {
  return (
    <div>
    <Child
          es6Function = {this.es6Function}
          simplifiedFunction = {this.simplifiedFunction} 
        />
    </div>
    )
  }

}

শিশু

import React, {Component} from 'react';

export default class Child extends Component {

  render () {
  return (
    <div>
    <h1 onClick= { () =>
            this.props.simplifiedFunction(<SomethingThatYouWantToPassIn>)
          }
        > Something</h1>
    </div>
    )
  }
}

সরল রাষ্ট্রহীন শিশুকে ES6 ধ্রুবক হিসাবে

import React from 'react';

const Child = () => {
  return (
    <div>
    <h1 onClick= { () =>
        this.props.es6Function(<SomethingThatYouWantToPassIn>)
      }
      > Something</h1>
    </div>
  )

}
export default Child;

Comments

— ইএস

Answer 4

Parentউপাদান থেকে propআপনার Childউপাদান হিসাবে নীচে পাস । অর্থাৎ,

export default class Parent extends Component {
  state = {
    word: ''
  }

  handleCall = () => {
    this.setState({ word: 'bar' })
  }

  render() {
    const { word } = this.state
    return <Child handler={this.handleCall} word={word} />
  }
}

const Child = ({ handler, word }) => (
<span onClick={handler}>Foo{word}</span>
)

Answer 5

ফাংশন ব্যবহার করে || রাষ্ট্রহীন উপাদান

মূল উপাদান Comp

 import React from "react";
 import ChildComponent from "./childComponent";

 export default function Parent(){

 const handleParentFun = (value) =>{
   console.log("Call to Parent Component!",value);
 }
 return (<>
           This is Parent Component
           <ChildComponent 
             handleParentFun={(value)=>{
               console.log("your value -->",value);
               handleParentFun(value);
             }}
           />
        </>);
}

শিশু উপাদান

import React from "react";


export default function ChildComponent(props){
  return(
         <> This is Child Component 
          <button onClick={props.handleParentFun("YoureValue")}>
            Call to Parent Component Function
          </button>
         </>
        );
}

Comments

আপনার উত্তরের মান যুক্ত করতে এই কোডটি কী করবে তার একটি সংক্ষিপ্ত ব্যাখ্যা যুক্ত করে বিবেচনা করুন।

— ক্রাই

যখন আপনি চাইল্ড উপাদানগুলির বোতামটি ক্লিক করেন তখন প্রসগুলির মাধ্যমে অভিভাবক উপাদানগুলিতে কল করুন।

— ওমকেশ সৃজনওয়ার

যদি ফাংশনটির প্যারামিটার থাকে? আপনি কীভাবে পিতামাতার কাছে প্যারামিটারগুলি পাস করবেন?

— alex351

হ্যাঁ! @ অ্যালেক্স 351 আমরা সেই দৃশ্যটি পরিচালনা করতে পারি। চাইল্ড কম্পোনেন্টে -> অনক্লিক = {প্রপস.হ্যান্ডলিপেন্টফুন ("YoureValue") parent প্যারেন্ট কম্পোনেন্টে -> হ্যান্ডেলপ্যারেন্টফুন = {(মান) => so কনসোল.লগ (); handleChildFun (মান); }}

— ওমকেশ সজনওয়ার

Answer 6

প্রতিক্রিয়া 16+

শিশু উপাদান

import React from 'react'

class ChildComponent extends React.Component
{
    constructor(props){
        super(props);       
    }

    render()
    {
        return <div>
            <button onClick={()=>this.props.greetChild('child')}>Call parent Component</button>
        </div>
    }
}

export default ChildComponent;

মূল উপাদান Comp

import React from "react";
import ChildComponent from "./childComponent";

class MasterComponent extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state={
            master:'master',
            message:''
        }
        this.greetHandler=this.greetHandler.bind(this);
    }

    greetHandler(childName){
        if(typeof(childName)=='object')
        {
            this.setState({            
                message:`this is ${this.state.master}`
            });
        }
        else
        {
            this.setState({            
                message:`this is ${childName}`
            });
        }

    }

    render()
    {
        return <div>
           <p> {this.state.message}</p>
            <button onClick={this.greetHandler}>Click Me</button>
            <ChildComponent greetChild={this.greetHandler}></ChildComponent>
        </div>
    }
}
export default  MasterComponent;