প্রতিক্রিয়াতে পিতামাতার অবস্থা কীভাবে আপডেট করবেন?

Question

আমার কাঠামোটি নিম্নরূপ দেখায়:

Component 1  

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5  

Component 3

কম্পোনেন্ট 3 অংশের 5 অবস্থার উপর নির্ভর করে কিছু তথ্য প্রদর্শন করা উচিত Since এবং হ্যাঁ, আমি রিডুএক্স সম্পর্কে পড়েছি, তবে এটি ব্যবহার করতে চাই না। আমি আশা করি এটি কেবল প্রতিক্রিয়া দিয়ে সমাধান করা সম্ভব। আমি কি ভূল?

Comments

অতি-সহজ: প্যারেন্ট-সেটস্টেট-ফাংশনটি শিশু-উপাদানগুলিতে সম্পত্তি মাধ্যমে পাস করুন: <মাইচাইল্ড কম্পোনেন্ট সেটস্টেট = {পি => {এই.সেটস্টেট (পি)}} /> শিশু-উপাদানগুলিতে এই.প্রেসের মাধ্যমে কল করুন। setState ({myObj ...});

— মার্সেল এনিক্স

@ মার্সেলএনিক্স, আপনার মন্তব্যটি আমার সময় বাঁচায়। ধন্যবাদ।

— দিনিথ মিনুরা

<MyChildComponent setState={(s,c)=>{this.setState(s, c)}} />আপনি যদি এই হ্যাকটি ব্যবহার করতে যাচ্ছেন তা নিশ্চিত করুন যে আপনি কলব্যাক সমর্থন করছেন।

— বার্কর্ম্ন 01

পিতামাতার অবস্থা নির্ধারণের জন্য একটি কলব্যাক পাস করা সত্যিই খারাপ অভ্যাস যা রক্ষণাবেক্ষণের সমস্যার কারণ হতে পারে। এটি এনক্যাপসুলেশনটি ভেঙে দেয় এবং এটি 2 4 এবং 5 টি দৃ coup়ভাবে এক সাথে মিশে যায় 1. আপনার সুনির্দিষ্ট প্রপস থাকা ভাল, যাতে যখনই কিছু ঘটে তখন শিশু উপাদানগুলি ইভেন্টগুলিকে ট্রিগার করতে পারে, তবে পিতামণ্ডল উপাদানগুলি ইভেন্টটি সঠিকভাবে পরিচালনা করবে।

— পাতো লোকো

@ মার্সেলইনিক্স, চারপাশে কোঁকড়ানো বন্ধনী কেন this.setState(p)? আমি তাদের ছাড়াই চেষ্টা করেছি এবং এটি কাজ করে বলে মনে হচ্ছে (আমি প্রতিক্রিয়া জানাতে খুব নতুন)

— বিগানন

Answer 1

শিশু-পিতামাতার যোগাযোগের জন্য আপনার পিতামাতার থেকে সন্তানের কাছে এইরকম অবস্থা নির্ধারণ করে একটি ফাংশন পাস করা উচিত

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

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

তবে আপনাকে আপনার উপাদানগুলির কাঠামোর পুনর্বিবেচনা করতে হবে, কারণ আমি বুঝতে পারছি যে 5 এবং 3 উপাদানগুলি সম্পর্কিত নয়।

এর একটি সম্ভাব্য সমাধান হ'ল এগুলিকে একটি উচ্চ স্তরের উপাদানগুলিতে মোড়ানো যা এতে 1 এবং 3 উভয় উপাদানকেই অন্তর্ভুক্ত করে This

Comments

আপনার কেন এটি দরকার? হ্যান্ডলারের = এটি.হ্যান্ডেলআরবাইন্ড (এটি) এবং কেবলমাত্র হ্যান্ডলারের কাজটিই স্থিতি দেয় না কেন?

— কেমুক 78

ES6 তে @ কেমুক 78 প্রতিক্রিয়া ক্লাসের পদ্ধতিগুলি শ্রেণিতে স্বয়ংক্রিয়ভাবে আবদ্ধ হয় না। সুতরাং আমরা যদি this.handler = this.handler.bind(this)কন্সট্রাক্টর যুক্ত না করি তবে ফাংশনের thisভিতরে handlerফাংশন বন্ধের কথা উল্লেখ করা হবে, শ্রেণি নয়। যদি আপনার সমস্ত ফাংশন কনস্ট্রাক্টরে আবদ্ধ করতে না চান তবে তীর ফাংশন ব্যবহার করে এটি মোকাবেলা করার জন্য আরও দুটি উপায় রয়েছে। আপনি কেবল ক্লিক হ্যান্ডলারটি লিখতে onClick={()=> this.setState(...)}পারেন, বা এখানে তীরের ফাংশনগুলির সাথে সম্পত্তি ইনিশিয়ালারদের একসাথে ব্যবহার করতে পারেন এখানে বর্ণিত আছে babeljs.io/blog/2015/06/07/react-on-es6- ফলস "তীর ফাংশন" এর আওতায়

— ইভান

এখানে ক্রিয়াকলাপের এর উদাহরণ এখানে: plnkr.co/edit/tGWecotmktae8zjS5yEr?p= পূর্বরূপ

— টাম্ব

এগুলি সমস্ত অর্থবোধক, কেন e.preventDefault? এবং যে jquery প্রয়োজন?

— ভিনসেন্ট বাসকারেলো

তাত্ক্ষণিক প্রশ্ন, এটি কি সন্তানের মধ্যে কোনও স্থানীয় রাষ্ট্রের নিয়োগকে অস্বীকার করে?

— এইগুইক্যান্ট এভেন

Answer 2

শিশু থেকে অভিভাবক উপাদানটিতে অন ক্লিকের ফাংশন যুক্তিটি দেওয়ার জন্য আমি নিম্নলিখিত কার্যনির্বাহী সমাধানটি পেয়েছি:

একটি পদ্ধতি পাস করার সাথে সংস্করণ ()

//ChildB component
class ChildB extends React.Component {

    render() {

        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div><button onClick={() => handleToUpdate('someVar')}>
            Push me
          </button>
        </div>)
    }
}

//ParentA component
class ParentA extends React.Component {

    constructor(props) {
        super(props);
        var handleToUpdate  = this.handleToUpdate.bind(this);
        var arg1 = '';
    }

    handleToUpdate(someArg){
            alert('We pass argument from Child to Parent: ' + someArg);
            this.setState({arg1:someArg});
    }

    render() {
        var handleToUpdate  =   this.handleToUpdate;

        return (<div>
                    <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentA />,
        document.querySelector("#demo")
    );
}

JSFIDDLE দেখুন

একটি তীর ফাংশন পাশ করার সাথে সংস্করণ

//ChildB component
class ChildB extends React.Component {

    render() {

        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div>
          <button onClick={() => handleToUpdate('someVar')}>
            Push me
          </button>
        </div>)
    }
}

//ParentA component
class ParentA extends React.Component { 
    constructor(props) {
        super(props);
    }

    handleToUpdate = (someArg) => {
            alert('We pass argument from Child to Parent: ' + someArg);
    }

    render() {
        return (<div>
            <ChildB handleToUpdate = {this.handleToUpdate} /></div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentA />,
        document.querySelector("#demo")
    );
}

JSFIDDLE দেখুন

Comments

এই ভাল! আপনি এই টুকরোটি ব্যাখ্যা করতে পারেন: <ChildB handleToUpdate = {handleToUpdate.bind(this)} />কেন আবার বাঁধতে হয়েছিল?

— ডেন

@ ডেন - আপনাকে এর প্রসঙ্গটি পিতামাতাকে আবদ্ধ করতে হবে যাতে thisসন্তানের ভিতরে ডাকা হলে , সন্তানের thisনয় বরং পিতামাতার অবস্থা বোঝায়। এটি তার সেরা সময়ে বন্ধ!

— কেসি

@ ক্যাসি কিন্তু আমরা কি কনস্ট্রাক্টারে এটি করছি না? আর তা কি যথেষ্ট নয় ??

— ডেন

তুমি পুরোপুরি ঠিক! আমি সেটা মিস করেছি. হ্যাঁ, আপনি যদি এটি ইতিমধ্যে নির্মাণে করে থাকেন তবে আপনি যাওয়াই ভাল!

— কেসি

আপনি একজন কিংবদন্তি সাথী! এটি রাষ্ট্রের এক্সচেঞ্জগুলি পরিচালনা করার জন্য প্যারেন্ট উপাদান তৈরি করতে বাধ্য করা ছাড়াই উপাদানগুলিকে সুন্দরভাবে নিজের মধ্যে

— রাখবে

Answer 3

আমার নিজের সমস্যার ধারণাটি মূলত তীর ফাংশনটির সাথে পরিবর্তনের এবং সন্তানের উপাদান থেকে পরমকে পাস করার জন্য আমাকে অত্যন্ত আপত্তিজনক উত্তরটি ধন্যবাদ জানাতে চাই:

 class Parent extends React.Component {
  constructor(props) {
    super(props)
    // without bind, replaced by arrow func below
  }

  handler = (val) => {
    this.setState({
      someVar: val
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {() => this.props.handler('the passing value')}/ >
  }
}

আশা করি এটি কাউকে সাহায্য করবে।

Comments

সরাসরি কল ওভার তীর ফাংশন সম্পর্কে কি বিশেষ?

— আশীষ কম্বলে

@ আশিষকেম্বলে thisইন তীর ফাংশন পিতামাতার প্রসঙ্গে (অর্থাত Parentশ্রেণি) বোঝায় ।

— সিপিএইচপিথন

এটি একটি সদৃশ উত্তর। আপনি গৃহীত উত্তরে একটি মন্তব্য যুক্ত করতে পারেন এবং ক্লাসে তীর ফাংশনটি ব্যবহার করতে এই পরীক্ষামূলক বৈশিষ্ট্যটির বিষয়ে উল্লেখ করতে পারেন।

— আরশসফট

Answer 4

আমি কাছাকাছি ফাংশন পাস সম্পর্কিত উত্তর পছন্দ করি, এটি একটি খুব সহজ কৌশল।

ফ্লিপ সাইডে আপনি এটি পাব / সাব ব্যবহার করে বা কোনও বৈকল্পিক, একটি প্রেরক, যেমন ফ্লাক্সের মতো ব্যবহার করেও অর্জন করতে পারেন । তত্ত্বটি অত্যন্ত সহজ, উপাদান 5 টি একটি বার্তা প্রেরণ করুন যা 3 উপাদানটি শুনছে। অংশ 3 তারপরে তার স্থিতি আপডেট করে যা পুনরায় রেন্ডারটিকে ট্রিগার করে। এর জন্য রাষ্ট্রীয় উপাদানগুলির প্রয়োজন, যা আপনার দৃষ্টিভঙ্গির উপর নির্ভর করে একটি বিরোধী-প্যাটার্ন হতে পারে বা নাও হতে পারে। আমি ব্যক্তিগতভাবে তাদের বিপক্ষে এবং তার পরিবর্তে চাই যে অন্য কিছু প্রেরণের জন্য শুনছে এবং খুব উপরে-নীচে থেকে রাষ্ট্রের পরিবর্তন করে (রেডাক্স এটি করে তবে অতিরিক্ত পরিভাষা যুক্ত করে)।

import { Dispatcher } from flux
import { Component } from React

const dispatcher = new Dispatcher()

// Component 3
// Some methods, such as constructor, omitted for brevity
class StatefulParent extends Component {
  state = {
    text: 'foo'
  } 

  componentDidMount() {
    dispatcher.register( dispatch => {
      if ( dispatch.type === 'change' ) {
        this.setState({ text: 'bar' })
      }
    }
  }

  render() {
    return <h1>{ this.state.text }</h1>
  }
}

// Click handler
const onClick = event => {
  dispatcher.dispatch({
    type: 'change'
  })
}

// Component 5 in your example
const StatelessChild = props => {
  return <button onClick={ onClick }>Click me</button> 
}

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

Comments

অফিসিয়াল টিউটোরিয়ালের মতো ব্রাউজারে আমার প্রতিক্রিয়া উপাদানগুলি "চলমান" রয়েছে ( ফেসবুক.

— github.io/react/docs/tutorial.html

আমি যে সিনট্যাক্সটি ব্যবহার করেছি সেটি ES2016 মডিউল সিনট্যাক্স যা ট্রান্সপিলেশন প্রয়োজন (আমি ব্যাবেল ব্যবহার করি , তবে অন্যরাও আছেন, ব্যাবলিফ ট্রান্সফর্ম ব্রাউসরিফাইয়ের সাহায্যে ব্যবহার করা যেতে পারে), এটি ট্রান্সপ্লাইস করেvar Dispatcher = require( 'flux' ).Dispatcher

— ম্যাট স্টাইলস

Answer 5

প্যারামের সাহায্যে শিশু থেকে প্যারেন্ট উপাদানগুলিতে অন ক্লিকের ফাংশন যুক্তিটি পাস করার জন্য আমি নিম্নলিখিত কার্যনির্বাহী সমাধানটি পেয়েছি:

অভিভাবক শ্রেণি:

class Parent extends React.Component {
constructor(props) {
    super(props)

    // Bind the this context to the handler function
    this.handler = this.handler.bind(this);

    // Set some state
    this.state = {
        messageShown: false
    };
}

// This method will be sent to the child component
handler(param1) {
console.log(param1);
    this.setState({
        messageShown: true
    });
}

// Render the child component and set the action property with the handler as value
render() {
    return <Child action={this.handler} />
}}

শিশু শ্রেণি:

class Child extends React.Component {
render() {
    return (
        <div>
            {/* The button will execute the handler function set by the parent component */}
            <Button onClick={this.props.action.bind(this,param1)} />
        </div>
    )
} }

Comments

এটি যে কোনও গ্রহণযোগ্য সমাধান কিনা তা কেউ বলতে পারেন (বিশেষত প্রস্তাবিত প্যারামিটারটি পাশ করার ক্ষেত্রে আগ্রহী)।

— ইলান্স

param1এটি কনসোলে প্রদর্শিত হয় যা এটি সর্বদা নির্ধারিত হয় নাtrue

— আশীষ কম্বলে

আমি সমাধানের মানের সাথে কথা বলতে পারি না, তবে এটি আমার জন্য সফলভাবে পরমকে পাস করে।

— জেমস

Answer 6

যখনই আপনার কোনও স্তরের সন্তানের মধ্যে পিতামাতার সাথে যোগাযোগের প্রয়োজন হয়, তারপরে প্রসঙ্গটি ব্যবহার করা আরও ভাল । প্যারেন্ট উপাদানগুলিতে প্রসঙ্গটি সংজ্ঞায়িত করুন যা সন্তানের দ্বারা অনুরোধ করা যেতে পারে

আপনার ক্ষেত্রে উপাদান 3 প্যারেন্ট উপাদান

static childContextTypes = {
        parentMethod: React.PropTypes.func.isRequired
      };

       getChildContext() {
        return {
          parentMethod: (parameter_from_child) => this.parentMethod(parameter_from_child)
        };
      }

parentMethod(parameter_from_child){
// update the state with parameter_from_child
}

এখন সন্তানের অংশে (আপনার ক্ষেত্রে 5 উপাদান), কেবল এই উপাদানটিকে বলুন যে এটি তার পিতামাতার প্রসঙ্গটি ব্যবহার করতে চায়।

 static contextTypes = {
       parentMethod: React.PropTypes.func.isRequired
     };
render(){
    return(
      <TouchableHighlight
        onPress={() =>this.context.parentMethod(new_state_value)}
         underlayColor='gray' >   

            <Text> update state in parent component </Text>              

      </TouchableHighlight>
)}

আপনি রেপোতে ডেমো প্রকল্পটি পেতে পারেন

Comments

আমি এই উত্তরটি বুঝতে সক্ষম হচ্ছি না, আপনি এটি সম্পর্কে আরও ব্যাখ্যা করতে পারেন

— আশীষ কম্বলে

Answer 7

দেখে মনে হচ্ছে আমরা কেবলমাত্র অভিভাবক থেকে সন্তানের কাছে ডেটা প্রেরণ করতে পারি কারণ প্রতিক্রিয়া ইউনিফাইড্রাকশনাল ডেটা ফ্লোকে উত্সাহ দেয় তবে পিতামাতাকে আপডেট করার জন্য যখন তার "চাইল্ড উপাদান" তে কিছু ঘটে তখন আমরা সাধারণত "কলব্যাক ফাংশন" বলে যা ব্যবহার করি use

আমরা প্যারেন্টে সংজ্ঞায়িত ফাংশনটি সন্তানের কাছে "প্রপস" হিসাবে পাস করি এবং সেই ফাংশনটিকে সন্তানের কাছ থেকে অভিভাবক উপাদানটিতে ট্রিগার করে।

---

class Parent extends React.Component {
  handler = (Value_Passed_From_SubChild) => {
    console.log("Parent got triggered when a grandchild button was clicked");
    console.log("Parent->Child->SubChild");
    console.log(Value_Passed_From_SubChild);
  }
  render() {
    return <Child handler = {this.handler} />
  }
}
class Child extends React.Component {
  render() {
    return <SubChild handler = {this.props.handler}/ >
  }
}
class SubChild extends React.Component { 
  constructor(props){
   super(props);
   this.state = {
      somethingImp : [1,2,3,4]
   }
  }
  render() {
     return <button onClick = {this.props.handler(this.state.somethingImp)}>Clickme<button/>
  }
}
React.render(<Parent />,document.getElementById('app'));

 HTML
 ----
 <div id="app"></div>

---

এই উদাহরণে আমরা সাব-চাইল্ড -> শিশু -> পিতামাতার কাছ থেকে সরাসরি সন্তানের কাছে ফাংশনটি পাস করে ডেটা পাস করতে পারি।

Answer 8

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

শুধু এখানে দেখুন:

class Parent extends React.Component {

  constructor() {
    super();
    this.state={
      someVar: value
    }
  }

  handleChange=(someValue)=>{
    this.setState({someVar: someValue})
  }

  render() {
    return <Child handler={this.handleChange} />
  }

}

export const Child = ({handler}) => {
  return <Button onClick={handler} />
}

কীটি একটি তীর ফাংশনে রয়েছে:

handleChange=(someValue)=>{
  this.setState({someVar: someValue})
}

আপনি এখানে আরও পড়তে পারেন । আশা করি এটি কারও জন্য কার্যকর হবে =)

Comments

এটি আমার কাছে আরও অনেক কিছু বোঝায়। ধন্যবাদ!

— ব্রেট রাউবেরি

Answer 9

-আমরা প্যারেন্টকম্পোনেন্টের অবস্থা আপডেট করতে হ্যান্ডেল ইনপুটচেন্জ পদ্ধতিটি তৈরি করতে পারি। চাইল্ড কম্পোনেন্টটি আমদানি করুন এবং আমরা পিতামাতার কাছ থেকে সন্তানের উপাদানগুলিতে দুটি আইকন পাস করি ie হ্যান্ডলাইনপুট চেঞ্জ ফাংশন এবং গণনা।

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      count: '',
    };
  }

  handleInputChange(e) {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  }

  render() {
    const { count } = this.state;
    return (
      <ChildComponent count={count} handleInputChange={this.handleInputChange} />
    );
  }
}

• এখন আমরা চাইল্ড কম্পোনেন্ট ফাইল তৈরি করি এবং চাইল্ডকমম্পোনেন্ট.জেএসএক্স হিসাবে সংরক্ষণ করি। এই উপাদানটি রাষ্ট্রবিহীন কারণ সন্তানের উপাদানটির একটি রাষ্ট্র নেই। প্রপস টাইপ পরীক্ষার জন্য আমরা প্রপ-প্রকারের লাইব্রেরি ব্যবহার করি।

  import React from 'react';
  import { func, number } from 'prop-types';
  
  const ChildComponent = ({ handleInputChange, count }) => (
    <input onChange={handleInputChange} value={count} name="count" />
  );
  
  ChildComponent.propTypes = {
    count: number,
    handleInputChange: func.isRequired,
  };
  
  ChildComponent.defaultProps = {
    count: 0,
  };
  
  export default ChildComponent;

Comments

যখন সন্তানের একটি সন্তান রয়েছে যা তার পিতামাতার প্রপাকে প্রভাবিত করে তখন কীভাবে এটি কাজ করবে?

— বোবার্ট

Answer 10

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

https://reactjs.org/docs/context.html

আপনি এর পরিবর্তে প্লেইন প্রতিক্রিয়াটি সঠিকভাবে ব্যবহার করতে পারেন।

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} />

অংশ 1 পর্যন্ত doSomethingAbout5 পাস করুন pass

    <Component1>
        <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/>
        <Component5 propThatDependsOn5={this.state.somethingAbout5}/>
    <Component1/>

যদি এটি একটি সাধারণ সমস্যা হয় তবে আপনার অ্যাপ্লিকেশনটির পুরো রাজ্যকে অন্য কোথাও নিয়ে যাওয়া শুরু করা উচিত। আপনার কয়েকটি বিকল্প রয়েছে, সর্বাধিক সাধারণ:

https://redux.js.org/

https://facebook.github.io/flux/

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

Answer 11

সুতরাং, আপনি যদি পিতামাতার উপাদান আপডেট করতে চান,

 class ParentComponent extends React.Component {
        constructor(props){
            super(props);
            this.state = {
               page:0
            }
        }

        handler(val){
            console.log(val) // 1
        }

        render(){
          return (
              <ChildComponent onChange={this.handler} />
           )
       }
   }


class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
             page:1
        };
    }

    someMethod = (page) => {
        this.setState({ page: page });
        this.props.onChange(page)
    }

    render() {
        return (
       <Button
            onClick={() => this.someMethod()} 
       > Click
        </Button>
      )
   }
}

এখানে অন চেঞ্জ হ'ল "হ্যান্ডলার" পদ্ধতির সাথে এটির সাথে আবদ্ধ একটি বৈশিষ্ট্য। আমরা প্রোপস যুক্তিতে অন চেঞ্জ সম্পত্তি মাধ্যমে প্রাপ্ত করার জন্য পদ্ধতি হ্যান্ডলারটি চাইল্ড ক্লাসের উপাদানটিতে দিয়েছি।

অন ​​চেঞ্জ এট্রিবিউটটি প্রপস অবজেক্টে এর মতো সেট করা হবে:

props ={
onChange : this.handler
}

এবং সন্তানের অংশে প্রেরণ করা হয়েছে

সুতরাং চাইল্ড উপাদান এই প্রপস.অন চেঞ্জের মতো প্রপস অবজেক্টে নামের নামের অ্যাক্সেস করতে পারে

এটি প্রপস রেন্ডার ব্যবহারের মাধ্যমে সম্পন্ন হয়েছে।

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

Comments

দুঃখিত .. দেরি করার জন্য, এখানে onChange হ্যান্ডলারের সাথে যুক্ত একটি পদ্ধতি যা এটির উদাহরণস্বরূপ। আমরা প্রোপস যুক্তিতে অন চেঞ্জ সম্পত্তি মাধ্যমে প্রাপ্ত করার জন্য পদ্ধতি হ্যান্ডলারটি চাইল্ড ক্লাসের উপাদানটিতে দিয়েছি। অন ​​চেঞ্জ বৈশিষ্ট্যটি প্রপস অবজেক্টে এই জাতীয় সেট করা হবে: প্রপস = {অনচেনজ: এই.হ্যান্ডলার} এবং সন্তানের উপাদানগুলিতে প্রেরণ করা হয়েছে তাই শিশু উপাদান এই প্রপসের মতো প্রোপস অবজেক্টে নামের নামের অ্যাক্সেস করতে পারে। প্রপস রেন্ডার ব্যবহার। রেফারেন্স এবং ক্রেডিট: [ ব্লগ.বিটস.আর.আই.পি

— প্রীতম এনটি

Answer 12

এইভাবে আমি এটি করি।

type ParentProps = {}
type ParentState = { someValue: number }
class Parent extends React.Component<ParentProps, ParentState> {
    constructor(props: ParentProps) {
        super(props)
        this.state = { someValue: 0 }

        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(value: number) {
        this.setState({...this.state, someValue: value})
    }

    render() {
        return <div>
            <Child changeFunction={this.handleChange} defaultValue={this.state.someValue} />
            <p>Value: {this.state.someValue}</p>
        </div>
    }
}

type ChildProps = { defaultValue: number, changeFunction: (value: number) => void}
type ChildState = { anotherValue: number }
class Child extends React.Component<ChildProps, ChildState> {
    constructor(props: ChildProps) {
        super(props)
        this.state = { anotherValue: this.props.defaultValue }

        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(value: number) {
        this.setState({...this.state, anotherValue: value})
        this.props.changeFunction(value)
    }

    render() {
        return <div>
            <input onChange={event => this.handleChange(Number(event.target.value))} type='number' value={this.state.anotherValue}/>
        </div>
    }
}

Answer 13

উপরে বর্ণিত বেশিরভাগ উত্তরগুলি প্রতিক্রিয়া.কম্পোনেন্ট ভিত্তিক ডিজাইনের জন্য। আপনি যদি useStateপ্রতিক্রিয়ার লাইব্রেরির সাম্প্রতিক আপগ্রেডগুলিতে ব্যবহার করছেন তবে এই উত্তরটি অনুসরণ করুন

Answer 14

<Footer 
  action={()=>this.setState({showChart: true})}
/>

<footer className="row">
    <button type="button" onClick={this.props.action}>Edit</button>
  {console.log(this.props)}
</footer>

Try this example to write inline setState, it avoids creating another function.

Comments

এটা তোলে কার্য-সম্পাদনার সমস্যা কারণ: stackoverflow.com/q/36677733/3328979

— Arashsoft