ReactJS में चाइल्ड कंपोनेंट से उसके पैरेंट तक डेटा कैसे पास करें?

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>            
        );
    }
});

मुझे मूल घटक में उपयोगकर्ता द्वारा चयनित मान प्राप्त करने की आवश्यकता है। मुझे यह त्रुटि मिल रही है:

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

किसी को भी समस्या को खोजने में मेरी मदद कर सकते हैं?

PS बाल घटक एक json फ़ाइल से एक ड्रॉपडाउन बना रहा है, और मुझे एक दूसरे के बगल में json सरणी के दोनों तत्वों को दिखाने के लिए ड्रॉपडाउन सूची की आवश्यकता है (जैसे: "आआ, अंग्रेजी" पहली पसंद के रूप में!)

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

Comments

<SelectLanguage onSelectLanguage={this.handleLanguage*Code*}/> एक लेखन त्रुटि।

— यूरी ताराबैंको

@YuryTarabanko धन्यवाद, लेकिन अभी भी एक ही त्रुटि हो रही है

— बिरिश

@DavinTryon मुझे इसे कैसे जोड़ना चाहिए? मैंने इस तरह की कोशिश की: handleLanguageCode: function(langValue) { this.setState({ language: langValue }).bind(this); },लेकिन यह एक त्रुटि देता है:ncaught TypeError: Cannot read property 'bind' of undefined

— बिरिश

@DavinTryon createClassगैर प्रतिक्रिया विधियों को ऑटोबाइंड करता है।

— यूरी ताराबांको

@ आप इस मुद्दे को प्रदर्शित करते हुए एक बेला बना सकते हैं?

— यूरी ताराबांको

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

धन्यवाद शुभम, आपके उत्तर ने समस्या को ठीक कर दिया है, लेकिन यह ड्रॉपडाउन सूची में चयनित आइटम नहीं दिखाता है। यह उसके बाद खाली है: /

— बिरिश

@Sarah ड्रॉपडाउनलिस्ट बनाते समय आपने इसका मान इस प्रकार दिया है ।state.selectedLanguage और यह किसी भी मूल्य के लिए आरंभिक नहीं है। यह मुद्दा हो सकता है। आप कौन से DropdownList घटक का उपयोग कर रहे हैं। अगर मुझे पता है कि शायद मैं इस मुद्दे को हल करने के लिए काम कर सकता हूं।

— शुभम खत्री

तुम सही हो। this.state.selectedLanguage/ मैं से DropDownList उपयोग कर रहा हूँ: हमेशा अशक्त हो रहा हैreact-widgets

— Birish

@ सराह मैंने कोड में एक छोटा सा बदलाव किया है, जिसमें ऑन-क्रैंक फ़ंक्शन के एन्स को एक प्रारंभिक राज्य मान सेट करना शामिल है। इसे आज़माएँ और मुझे बताएं कि क्या यह आपके लिए काम करता है

— शुभम खत्री

एक त्रुटि देता है 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);कंस्ट्रक्टर में मत भूलो , क्योंकि आपको यह मिल सकता है। यदि आप getData में राज्य में हेरफेर करना चाहते हैं तो यह एक फ़ंक्शन नहीं है।

— मिरो जे।

Answer 3

मुझे यह दृष्टिकोण मिला कि मुझे आवश्यकता होने पर माता-पिता में बाल घटक से डेटा कैसे प्राप्त किया जाए।

जनक:

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} /> )

चाइल्ड कंपोनेंट में सबसे पहले हमें प्राप्त करने वाले प्रॉपर मिलते हैं

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);  
  }