কীভাবে শিশু উপাদান থেকে ডেটা তার অভিভাবকের কাছে রিঅ্যাকটিজেএসে পাস করবেন?

Question

আমি নীচের মতো কোনও সন্তানের উপাদান থেকে তার পিতামাতার কাছে ডেটা প্রেরণের চেষ্টা করছি:

const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },
    handleLanguageCode: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9" >
                    <SelectLanguage onSelectLanguage={this.handleLanguage}/> 
                </div>
        );
});

এবং এখানে শিশু উপাদান:

export const SelectLanguage = React.createClass({
    getInitialState: function(){
        return{
            selectedCode: '',
            selectedLanguage: '',
        };
    },

    handleLangChange: function (e) {
        var lang = this.state.selectedLanguage;
        var code = this.state.selectedCode;
        this.props.onSelectLanguage({selectedLanguage: lang});   
        this.props.onSelectLanguage({selectedCode: code});           
    },

    render() {
        var json = require("json!../languages.json");
        var jsonArray = json.languages;
        return (
            <div >
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    value={this.state.selectedLanguage}
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
});

আমার যা প্রয়োজন তা হল প্যারেন্ট উপাদানটিতে ব্যবহারকারীর দ্বারা নির্বাচিত মান পাওয়া get আমি এই ত্রুটি পাচ্ছি:

Uncaught TypeError: this.props.onSelectLanguage is not a function

কেউ কি আমাকে সমস্যা খুঁজতে সাহায্য করতে পারে?

পিএস শিশু উপাদানটি জসন ফাইল থেকে একটি ড্রপডাউন তৈরি করছে এবং জসসন অ্যারের উভয় উপাদান একে অপরের পাশে দেখানোর জন্য আমার ড্রপডাউন তালিকার প্রয়োজন (যেমন: "আআ, ইংলিশ" প্রথম পছন্দ হিসাবে!)

{  
   "languages":[  
      [  
         "aaa",
         "english"
      ],
      [  
         "aab",
         "swedish"
      ],
}

Comments

<SelectLanguage onSelectLanguage={this.handleLanguage*Code*}/> একটি ছাপাখানা.

— ইয়ুরি তারাব্যাঙ্কো

@ ইউরি তারাব্যাঙ্কো ধন্যবাদ, তবে এখনও একই ত্রুটি পেয়ে

— যাচ্ছেন

@ ডেভিনিট্রিওন আমি কীভাবে এটি যুক্ত করব? আমি handleLanguageCode: function(langValue) { this.setState({ language: langValue }).bind(this); },এটির মতো চেষ্টা করেছি: তবে এটি একটি ত্রুটি ncaught TypeError: Cannot read property 'bind' of undefined

— ফেরায়

@ createClassডেভিনিট্রিওন অ-প্রতিক্রিয়া পদ্ধতি অটোবাইন্ডগুলি।

— ইয়ুরি তারাব্যাঙ্কো

@OP আপনি কি এই সমস্যাটি দেখিয়ে একটি বেহালতা তৈরি করতে পারেন?

— ইয়ুরি তারাব্যাঙ্কো

Answer 1

এই কাজ করা উচিত. প্রপকে ফেরত পাঠানোর সময় আপনি যে কোনও বিষয় হিসাবে প্রেরণ করছেন বরং মান হিসাবে প্রেরণ করুন বা বিকল্পভাবে পিতামণ্ডলের উপাদান হিসাবে এটি ব্যবহার করুন। দ্বিতীয়ত আপনাকে নামের মান যুক্ত করতে valueFieldএবং আপনার ব্যবহার এবং textFieldবৈশিষ্ট্যটি যুক্ত করতে আপনার জেসন অবজেক্টটি ফর্ম্যাট করতে হবেDropdownList

সংক্ষিপ্ত উত্তর

মূল:

<div className="col-sm-9">
     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
</div>

শিশুঃ

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

---

বিশদ:

সম্পাদনা করুন:

বিবেচনা করে React.createClass v16.0 থেকে অবচয় করা হয়, আরও এগিয়ে যাওয়ার জন্য এবং আরও বাড়িয়ে একটি প্রতিক্রিয়া উপাদান তৈরি করা ভাল React.Component। এই সিনট্যাক্সের সাহায্যে শিশু থেকে পিতা-মাতার উপাদানগুলিতে ডেটা পাঠানো দেখতে দেখতে ভাল লাগবে

মাতা

class ParentComponent extends React.Component {

    state = { language: '' }

    handleLanguage = (langValue) => {
        this.setState({language: langValue});
    }

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        )
     }
}

শিশু

var json = require("json!../languages.json");
var jsonArray = json.languages;

export class SelectLanguage extends React.Component {
    state = {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        }

    handleLangChange = () => {
        var lang = this.dropdown.value;
        this.props.onSelectLanguage(lang);            
    }

    render() {
        return (
            <div>
                <DropdownList ref={(ref) => this.dropdown = ref}
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
}

---

createClassসিন্টেক্স ব্যবহার করে যা ওপি তার উত্তর প্যারেন্টে ব্যবহার করেছিল

const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },

    handleLanguage: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        );
});

শিশু

var json = require("json!../languages.json");
var jsonArray = json.languages;

export const SelectLanguage = React.createClass({
    getInitialState: function() {
        return {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        };
    },

    handleLangChange: function () {
        var lang = this.refs.dropdown.value;
        this.props.onSelectLanguage(lang);            
    },

    render() {

        return (
            <div>
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
});

তাদেরকে JSON:

{ 
"languages":[ 

    { 
    "code": "aaa", 
    "lang": "english" 
    }, 
    { 
    "code": "aab", 
    "lang": "Swedish" 
    }, 
  ] 
}

Comments

ধন্যবাদ শুভম, আপনার উত্তরটি সমস্যার সমাধান করেছে তবে এটি নির্বাচিত আইটেমটি ড্রপডাউন তালিকায় প্রদর্শন করে না। এটির পরে এটি খালি: /

— বরিশ

@ সারাহ ড্রপডাউনলিস্ট তৈরি করার সময় আপনি এর মান এই.স্টেট.স্লেজড ল্যাঙ্গুয়েজ হিসাবে অর্পণ করেছেন এবং এটি কোনও মান থেকে আরম্ভ করা হয়নি। বিষয়টি হতে পারে। আপনি কোন ড্রপডাউনলিস্ট উপাদান ব্যবহার করছেন? আমি যদি জানি তবে আমি সমস্যাটি সমাধানের জন্য এটিতে কাজ করতে পারি।

— শুভ খত্রি

তুমি ঠিক. দেখে this.state.selectedLanguageমনে হয় সর্বদা নাল: / আমি ড্রপডাউনলিস্টটি ব্যবহার করছিreact-widgets

— বরিশ

@ সারাহ আমি কোডের সাথে একটি সামান্য পরিবর্তন করেছি, যার সাথে অন-চেঞ্জ ফাংশনটিতে মান বন্ডিং রয়েছে যা প্রাথমিক রাষ্ট্রীয় মান সেট করে। এটি চেষ্টা করে দেখুন এবং বলুন এটি আপনার পক্ষে কাজ করে

— শুভম খত্রি

একটি ত্রুটি ফেরত পাঠায়: Uncaught ReferenceError: value is not defined। আমি এই পরিবর্তনটি করেছি: onChange={this.handleLangChange.bind(this, this.value)}এবং কোনও ত্রুটি ফিরে আসেনি, তবে এখনও এটি নির্বাচিত মানটি দেখায় না :(

— বরিশ

Answer 2

শিশু উপাদান থেকে পিতামাতার উপাদানগুলিতে ডেটা প্রেরণ করা

মূল অংশে:

getData(val){
    // do not forget to bind getData in constructor
    console.log(val);
}
render(){
 return(<Child sendData={this.getData}/>);
}

শিশু উপাদানগুলিতে:

demoMethod(){
   this.props.sendData(value);
 }

Comments

this.getData = this.getData.bind(this);কনস্ট্রাক্টরের কথা ভুলে যাবেন না , কারণ আপনি এটি পেতে পারেন get

— মিরো জে।

Answer 3

আমি যখন প্রয়োজনবোধ করি তখন পিতা-মাতার মধ্যে সন্তানের উপাদান থেকে কীভাবে ডেটা পাবেন the

মূল:

class ParentComponent extends Component{
  onSubmit(data) {
    let mapPoint = this.getMapPoint();
  }

  render(){
    return (
      <form onSubmit={this.onSubmit.bind(this)}>
        <ChildComponent getCurrentPoint={getMapPoint => {this.getMapPoint = getMapPoint}} />
        <input type="submit" value="Submit" />
      </form>
    )
  }
}

শিশুঃ

class ChildComponent extends Component{
  constructor(props){
    super(props);

    if (props.getCurrentPoint){
      props.getCurrentPoint(this.getMapPoint.bind(this));
    }
  }

  getMapPoint(){
    return this.Point;
  }
}

এই উদাহরণটি দেখায় যে কীভাবে শিশু উপাদান থেকে পিতামাতার কাছে ফাংশনটি পাস করতে হবে এবং সন্তানের কাছ থেকে ডেটা পাওয়ার জন্য এই ফাংশনটি ব্যবহার করবেন।

Answer 4

বিবেচনা প্রতিক্রিয়া ফাংশন উপাদান এবং ব্যবহার হুক্স এই দিন আরো জনপ্রিয় হচ্ছে, আমি সহজ উদাহরণ দিতে কেমন পিতা বা মাতা উপাদান সন্তানের থেকে ডেটা পাসিং করতে

মূল ফাংশন অংশে আমাদের থাকবে:

import React, { useState, useEffect } from "react";

তারপর

const [childData, setChildData] = useState("");

এবং সেটচিল্ডডাটা (যা ক্লাস উপাদানগুলিতে এই সেটসেট স্টেটের মতো একটি কাজ করে) সন্তানের কাছে পাস করছে

return( <ChildComponent passChildData={setChildData} /> )

চাইল্ড কম্পোনেন্টে প্রথমে আমরা প্রসেসগুলি পাই get

function ChildComponent(props){ return (...) }

তারপরে আপনি কোনও হ্যান্ডলার ফাংশন ব্যবহারের মতো ডেটা পাস করতে পারেন

const functionHandler = (data) => {

props.passChildData(data);

}

Answer 5

React.createClass পদ্ধতিটি প্রতিক্রিয়াটির নতুন সংস্করণে অবচিত করা হয়েছে, আপনি রাষ্ট্রের বজায় রাখতে খুব সহজেই একটি কার্যকরী উপাদান এবং অন্য শ্রেণীর উপাদান তৈরি করতে পারেন:

মূল:

const ParentComp = () => {
  
  getLanguage = (language) => {
    console.log('Language in Parent Component: ', language);
  }
  
  <ChildComp onGetLanguage={getLanguage}
};

শিশুঃ

class ChildComp extends React.Component {
    state = {
      selectedLanguage: ''
    }
    
    handleLangChange = e => {
        const language = e.target.value;
        thi.setState({
          selectedLanguage = language;
        });
        this.props.onGetLanguage({language}); 
    }

    render() {
        const json = require("json!../languages.json");
        const jsonArray = json.languages;
        const selectedLanguage = this.state;
        return (
            <div >
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    value={tselectedLanguage}
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
};

Comments

কেবলমাত্র একটি নোট ... ভবিষ্যতের প্রমাণটির উত্তর দেওয়ার জন্য আপনার "নতুন সংস্করণ" পরিবর্তে প্রতিক্রিয়াটির নির্দিষ্ট সংস্করণটি উল্লেখ করা উচিত।

— স্টিভ-ও

Answer 6

নীচের মতো শিশু উপাদান থেকে পিতামাতাদের উপাদান পর্যন্ত

মূল উপাদান

class Parent extends React.Component {
   state = { message: "parent message" }
   callbackFunction = (childData) => {
       this.setState({message: childData})
   },
   render() {
        return (
            <div>
                 <Child parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
   }
}

শিশু উপাদান

class Child extends React.Component{
    sendBackData = () => {
         this.props.parentCallback("child message");
    },
    render() { 
       <button onClick={sendBackData}>click me to send back</button>
    }
};

আমি আশা করি এই কাজ

Answer 7

মধ্যে React v16.8+ফাংশন উপাদান, আপনি ব্যবহার করতে পারেন useState()একটি ফাংশন রাষ্ট্র আপনাকে অভিভাবক রাষ্ট্র আপডেট করুন, তারপর একটি সাজসরঞ্জাম অ্যাট্রিবিউট হিসাবে সন্তানকে তে এটি পাস, তারপর সন্তান উপাদান ভিতরে আপনাকে অভিভাবক রাষ্ট্র ফাংশন আরম্ভ করতে পারবেন যা তৈরি করতে নিম্নলিখিত ওয়ার্কিং স্নিপেট হয় :

const { useState , useEffect } = React;

function Timer({ setParentCounter }) {
  const [counter, setCounter] = React.useState(0);

  useEffect(() => {
    let countersystem;
    countersystem = setTimeout(() => setCounter(counter + 1), 1000);

    return () => {
      clearTimeout(countersystem);
    };
  }, [counter]);

  return (
    <div className="App">
      <button
        onClick={() => {
          setParentCounter(counter);
        }}
      >
        Set parent counter value
      </button>
      <hr />
      <div>Child Counter: {counter}</div>
    </div>
  );
}

function App() {
  const [parentCounter, setParentCounter] = useState(0);

  return (
    <div className="App">
      Parent Counter: {parentCounter}
      <hr />
      <Timer setParentCounter={setParentCounter} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

Answer 8

এমনকি পিতামাতাকে সরাসরি রাষ্ট্র আপডেট করে ফাংশনটি এড়াতে পারেন

মূল অংশে:

render(){
 return(<Child sendData={ v => this.setState({item: v}) } />);
}

শিশু উপাদানগুলিতে:

demoMethod(){
   this.props.sendData(value);
}

Answer 9

ধারণাটি হ'ল সন্তানের কাছে একটি কলব্যাক প্রেরণ করা হবে যা ডেটা ফিরিয়ে দেওয়ার জন্য ডাকা হবে

ফাংশন ব্যবহার করে একটি সম্পূর্ণ এবং সর্বনিম্ন উদাহরণ:

অ্যাপ্লিকেশন এমন একটি শিশু তৈরি করবে যা একটি এলোমেলো সংখ্যা গণনা করবে এবং এটি সরাসরি পিতামাতার কাছে প্রেরণ করবে console.log, ফলস্বরূপ

const Child = ({ handleRandom }) => {
  handleRandom(Math.random())

  return <span>child</span>
}

const App = () => <Child handleRandom={(num) => console.log(num)}/>

Answer 10

মূল উপাদান: - টাইমমোডাল

  handleTimeValue = (timeValue) => {
      this.setState({pouringDiff: timeValue});
  }

  <TimeSelection 
        prePourPreHours={prePourPreHours}
        setPourTime={this.setPourTime}
        isPrePour={isPrePour}
        isResident={isResident}
        isMilitaryFormatTime={isMilitaryFormatTime}
        communityDateTime={moment(communityDT).format("MM/DD/YYYY hh:mm A")}
        onSelectPouringTimeDiff={this.handleTimeValue}
     />

দ্রষ্টব্য : - onSelectPouringTimeDiff = {this.handleTimeValue}

চাইল্ড কম্পোনেন্টে কল করার সময় প্রপসগুলি কল করুন

 componentDidMount():void{
      // Todo use this as per your scenrio
       this.props.onSelectPouringTimeDiff(pouringDiff);  
  }