ReactJS कॉल पैरेंट विधि

Question

मैं अपना पहला कदम ReactJS में बना रहा हूं और माता-पिता और बच्चों के बीच संवाद को समझने की कोशिश कर रहा हूं। मैं फॉर्म बना रहा हूं, इसलिए मेरे पास खेतों को स्टाइल करने के लिए घटक है। और मेरे पास मूल घटक भी है जिसमें फ़ील्ड शामिल है और इसे जाँच रहा है। उदाहरण:

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

इसे करने का कोई तरीका है। और क्या मेरा तर्क reactjs "दुनिया" में अच्छा है? आपके समय के लिए धन्यवाद।

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कॉल और । बदले में एक बांधता है एक मानक के लिए हैंडलर तत्व और के लिए मूल्य ऊपर से गुजरता है कॉलबैक अगर यह निर्धारित किया है।ChildvalueonChangeChildonChange<input />Parent

नतीजतन Parentकी changeHandlerविधि पहला तर्क से स्ट्रिंग मान होने के साथ कहा जाता है <input />में क्षेत्र Child। इसका परिणाम यह है कि Parentराज्य को उस मूल्य के साथ अद्यतन किया जा सकता है, जिससे माता-पिता का <span />तत्व नए मूल्य के साथ अद्यतन होता है क्योंकि आप इसे Childइनपुट क्षेत्र में लिखते हैं ।

Comments

मुझे लगता है कि आपको बच्चे को पारित करने से पहले माता-पिता के कार्य को बांधने की आवश्यकता है:<Child value={this.state.value} onChange={this.changeHandler.bind(this)} />

— o01

@ o01 नहीं, क्योंकि आप ऐसा नहीं कर रहे हैं, React.createClassजो मैं उपयोग कर रहा हूं, जो सभी घटक विधियों को ऑटो करता है। अगर मैं React es6 वर्गों का उपयोग कर रहा था, तो आपको इसे बांधने की आवश्यकता होगी (जब तक कि आप कंस्ट्रक्टर में ऑटो-बाइंडिंग नहीं करते हैं जो कि बहुत सारे लोग इन दिनों इसे पाने के लिए कर रहे हैं)

— माइक चालक

@MikeDriver मैं देख रहा हूं। पता नहीं था कि यह ECMAScript 6 कक्षाओं (जो मैं हूं) के उपयोग के मामलों तक सीमित था। यह भी पता नहीं था कि रिएक्ट टीम कंस्ट्रक्टर में ऑटो बाइंडिंग की सिफारिश करती है ।

— o01

मुझे नहीं पता कि वे इसकी सलाह देते हैं, लेकिन मुझे लगता है कि यह काफी सामान्य बात है। यह मुझे रेंडर थ्रेड के अंदर बांधने की तुलना में अधिक समझ में आता है, कारण .bindएक नया फ़ंक्शन देता है, इसलिए मूल रूप से आप रेंडर चलाने पर हर बार एक नया फ़ंक्शन बना रहे हैं। यह शायद ठीक है, लेकिन अगर आप कंस्ट्रक्टर में बांधते हैं तो आप केवल हर रेंडर के बजाय इंस्टेंटेशन पर प्रति घटक विधि के अनुसार ऐसा कर रहे हैं। यह नाइट-पिकिंग है ... लेकिन तकनीकी रूप से मुझे अच्छा लगता है!

— माइक चालक

@ DavidLy-Gagnon अच्छी तरह से उदाहरण में यह अपरिभाषित हो सकता है क्योंकि मैंने प्रचार में शामिल नहीं किया है। लेकिन हाँ आप या तो ऐसा कर सकते हैं या सिर्फ जाँच सकते हैं कि यह परिभाषित किया गया था या इसके बजाय।

— माइक चालक

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)

— विटाली एंड्रीशिशिन 5'18 '12:

हाय वैलेंटाइन पेटकोव। स्वागत हे!

— विटाली एंड्रीशिशिन

Answer 3

2019 प्रतिक्रिया 16+ और ईएस 6 के साथ अपडेट करें

चूंकि React.createClassइसे पोस्ट करने के बाद प्रतिक्रिया संस्करण 16 से हटा दिया जाता है और नए जावास्क्रिप्ट ईएस 6 आपको अधिक लाभ देगा।

माता-पिता

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

ES6 JS में 2 के बजाय 4 स्थान देखना मुझे दुखी करता है: '(

— बैटलन

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

फंक्शन का उपयोग करना || स्टेटलेस घटक

जनक घटक

 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

अपने जवाब में मूल्य जोड़ने के लिए इस कोड पर एक छोटी व्याख्या जोड़ने पर विचार करें।

— क्रे

जब आप चाइल्ड कंपोनेंट में बटन पर क्लिक करते हैं तो प्रॉप्स के जरिए पैरेंट कंपोनेंट फंक्शन में कॉल करें।

— ओमकेश सज्जनवार

क्या होगा अगर फ़ंक्शन के पैरामीटर हैं? आप माता-पिता को पैरामीटर कैसे पास करते हैं?

— एलेक्स 351

हाँ! @ alex351 हम उस परिदृश्य को संभाल सकते हैं। चाइल्ड कंपोनेंट में -> onClick = {props.handleParentFun ("YoureValue")} पैरेंट कंपोनेंट में -> हैंडलParentFun = {(value) => {कंसोल.लॉग (); 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;

जनक घटक

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;