प्रतिक्रिया में माता-पिता की स्थिति को कैसे अपडेट करें?

Question

मेरी संरचना इस प्रकार है:

Component 1  

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5  

Component 3

घटक 3 को घटक 5 की स्थिति के आधार पर कुछ डेटा प्रदर्शित करना चाहिए। चूंकि प्रॉप्स अपरिवर्तनीय हैं, मैं बस घटक 1 में स्थिति को नहीं बचा सकता और इसे आगे भेज सकता हूं, है ना? और हाँ, मैंने redux के बारे में पढ़ा है, लेकिन इसका उपयोग नहीं करना चाहता। मुझे उम्मीद है कि इसे सिर्फ प्रतिक्रिया के साथ हल करना संभव है। क्या मै गलत हु?

Comments

सुपर-आसान: चाइल्ड-कंपोनेंट को प्रॉपर्टी के माध्यम से पेरेंट-सेटस्टैट-फंक्शन पास करें: <MyChildComponent setState = {p => {this.setState (p)}} /> चाइल्ड-कंपोनेंट में इसके माध्यम से कॉल करें। setState ({myObj, ...});

— मार्सेल एनिक्स

@MarcelEnnix, आपकी टिप्पणी मेरा समय बचाती है। धन्यवाद।

— दीनथ मिनुरा

<MyChildComponent setState={(s,c)=>{this.setState(s, c)}} />यदि आपका इस हैक का उपयोग करने जा रहा है तो सुनिश्चित करें कि आप कॉलबैक का समर्थन करते हैं।

— बारकर्मन 01

माता-पिता की स्थिति निर्धारित करने के लिए कॉलबैक पास करना वास्तव में एक बुरा अभ्यास है जो रखरखाव की समस्याओं को जन्म दे सकता है। यह एनकैप्सुलेशन को तोड़ता है और यह घटकों को 2 4 और 5 को कसकर युग्मित करता है। यदि आप इस रास्ते पर चलते हैं तो आप इनमें से किसी भी बच्चे के घटक का फिर से उपयोग नहीं कर पाएंगे। यह बेहतर है कि आपके पास विशिष्ट प्रॉप्स हैं इसलिए बाल घटक घटनाओं को ट्रिगर कर सकते हैं जब भी कुछ होता है, तो मूल घटक उस घटना को ठीक से संभाल लेंगे।

— पाटो लोको

@MarcelEnnix, चारों ओर घुंघराले कोष्ठक क्यों 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 दोनों की स्थिति होगी। यह घटक प्रॉप्स के माध्यम से निचले स्तर की स्थिति निर्धारित करेगा।

Comments

आपको यह क्यों चाहिए। हैंडलर = this.handler.bind (यह) और न केवल हैंडलर फ़ंक्शन जो राज्य को सेट करता है?

— chemook78

ES6 रिएक्ट क्लास के तरीकों में @ chemook78 क्लास के लिए ऑटो-बाइंड नहीं करता है। इसलिए यदि हम this.handler = this.handler.bind(this)कंस्ट्रक्टर में नहीं जोड़ते हैं , thisतो handlerफ़ंक्शन के अंदर फ़ंक्शन क्लोजर को संदर्भित करेगा, न कि क्लास को। यदि आप अपने सभी फ़ंक्शंस को कंस्ट्रक्टर में बाँधना नहीं चाहते हैं, तो एरो फ़ंक्शंस का उपयोग करके इससे निपटने के दो और तरीके हैं। आप बस क्लिक हैंडलर को लिख सकते हैं onClick={()=> this.setState(...)}, या आप "एरो फ़ंक्शंस" के तहत babeljs.io/blog/2015/06/07/react-on-es6-plus के रूप में वर्णित तीर फ़ंक्शंस के साथ प्रॉपर्टी इनिशियलाइज़र का उपयोग कर सकते हैं

— इवान

इस क्रिया में इसका एक उदाहरण है: plnkr.co/edit/tGWecotmktae8zjS5yEr?p=preview

— Tamb

यह सब समझ में आता है, क्यों e.preventDefault? और इसके लिए jquery की आवश्यकता होती है?

— विंसेंट बसकेरलो

त्वरित प्रश्न, क्या यह बच्चे के भीतर एक स्थानीय राज्य के काम को बाधित करता है?

— ThisGuyCantEven

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तो माता-पिता की स्थिति का उल्लेख हो न कि बच्चे का। यह अपने बेहतरीन पर बंद है!

— केसी

@ कैसी लेकिन क्या हम निर्माता में ऐसा नहीं कर रहे हैं? और क्या यह पर्याप्त नहीं है ??

— डेन

तुम बिलकुल ठीक कह रहे हो! मैंने यह खो दिया। हां, अगर आपने इसे पहले से ही कंस्ट्रक्टर में कर दिया है तो आप जाने के लिए अच्छे हैं!

— केसी

तुम एक किंवदंती साथी हो! राज्य के आदान

— adamj

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

प्रत्यक्ष कॉल पर तीर फ़ंक्शन के बारे में क्या खास है?

— आशीष कांबले

@AishishKamble thisएरो फ़ंक्शंस में माता-पिता के संदर्भ (यानी Parentक्लास) को संदर्भित किया गया है ।

— CPHPython

यह एक डुप्लिकेट उत्तर है। आप क्लास में एरो फंक्शन का उपयोग करने के लिए इस प्रयोगात्मक विशेषता के बारे में स्वीकृत उत्तर के लिए एक टिप्पणी जोड़ सकते हैं और इसका उल्लेख कर सकते हैं ।

— अराशॉफ्ट

Answer 4

मुझे पासिंग फ़ंक्शंस के बारे में जवाब पसंद है, इसकी बहुत आसान तकनीक है।

फ्लिप पक्ष पर आप इसे पब / उप का उपयोग करके या एक प्रकार, एक डिस्पैचर का उपयोग करके भी प्राप्त कर सकते हैं, जैसा कि फ्लक्स करता है। सिद्धांत सुपर सरल है, घटक 5 को एक संदेश भेजें जो घटक 3 के लिए सुन रहा है। घटक 3 फिर अपनी स्थिति को अद्यतन करता है जो पुन: रेंडर को ट्रिगर करता है। इसके लिए स्टेटफुल घटकों की आवश्यकता होती है, जो आपके दृष्टिकोण के आधार पर, एक प्रतिमान हो सकता है या नहीं भी हो सकता है। मैं व्यक्तिगत रूप से उनके खिलाफ हूं और बल्कि यह चाहूंगा कि कुछ और बहुत ऊपर से डिस्पैच और परिवर्तन की स्थिति को सुन रहे हैं (Redux ऐसा करता है, लेकिन अतिरिक्त शब्दावली जोड़ता है)।

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में प्रेषण के साथ कोई नहीं है , बस एक संदेश आईडी)। आप इसे पारंपरिक पब / उप (जैसे घटनाओं से EventEmitter का उपयोग करना, या किसी अन्य संस्करण) को बहुत आसानी से अनुकूलित कर सकते हैं यदि यह आपके लिए अधिक समझ में आता है।

Comments

मेरे रिएक्ट के घटक ब्राउज़र में एक आधिकारिक ट्यूटोरियल की तरह "चल रहे हैं" ( facebook.github.io/react/docs/tutorial.html ) मैंने फ्लक्स को ब्राउज़र के साथ शामिल करने की कोशिश की, लेकिन ब्राउज़र का कहना है कि डिस्पैचर नहीं मिला है :(

— wklm

मैंने जो सिंटैक्स का उपयोग किया था वह 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

ऐसा लगता है कि हम केवल माता-पिता से बच्चे के लिए डेटा पारित कर सकते हैं क्योंकि प्रतिक्रिया यूनिडायरेक्शनल डेटा फ़्लो को बढ़ावा देती है, लेकिन माता-पिता को खुद को अपडेट करने के लिए जब कुछ "चाइल्ड कंपोनेंट" में कुछ होता है, तो हम आम तौर पर एक "कॉलबैक फ़ंक्शन" का उपयोग करते हैं।

हम बच्चे को "सहारा" के रूप में माता-पिता में परिभाषित फ़ंक्शन पास करते हैं और उस फ़ंक्शन को बच्चे से मूल घटक में ट्रिगर करते हैं।

---

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>

---

इस उदाहरण में हम SubChild -> Child -> जनक से डेटा पास बनवा सकते हैं, जो अपने सीधे बच्चे के लिए कार्य कर रहा है।

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

-हम ParentComponent राज्य को अद्यतन करने के लिए ParentComponent और हैंडलInputChange विधि से बना सकते हैं। चाइल्डकम्पोनेंट आयात करें और हम माता-पिता से बाल घटक तक दो प्रॉप्स पास करते हैं।

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

• अब हम ChildComponent फ़ाइल बनाते हैं और ChildComponent.jsx के रूप में सहेजते हैं। यह घटक स्टेटलेस है क्योंकि चाइल्ड कंपोनेंट में कोई स्थिति नहीं है। हम प्रॉपर टाइप चेकिंग के लिए प्रोप-टाइप लाइब्रेरी का उपयोग करते हैं।

  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 पास करें

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

यहाँ onChange उदाहरण के लिए बाध्य "हैंडलर" विधि के साथ एक विशेषता है। हमने चाइल्ड क्लास कंपोनेंट को मेथड हैंडलर के माध्यम से प्राप्त करने के लिए विधि हैंडलर को अपने प्रॉपर तर्क में पारित किया।

OnChange विशेषता को इस तरह एक प्रॉपर ऑब्जेक्ट में सेट किया जाएगा:

props ={
onChange : this.handler
}

और बच्चे घटक को पारित कर दिया

तो बाल घटक इस props.onChange की तरह सहारा वस्तु में नाम के मूल्य तक पहुँच सकते हैं

यह रेंडर प्रॉप्स के उपयोग के माध्यम से किया गया है।

अब चाइल्ड कंपोनेंट में एक बटन "क्लिक" होता है जिसमें ऑनक्लिक ईवेंट सेट किया जाता है ताकि हैंडलर पद्धति को कॉल किया जा सके और उसके प्रॉप्स लॉजिक ऑब्जेक्ट में onChnge हो। तो अब यह .props.onChange in चाइल्ड पैरेंट क्लास संदर्भ और क्रेडिट: बिट्स और मोहरे में आउटपुट पद्धति रखता है

Comments

क्षमा करें .. देरी के लिए, यहाँ onChange उदाहरण के लिए "हैंडलर" विधि के साथ एक विशेषता है। हमने चाइल्ड क्लास कंपोनेंट को मेथड हैंडलर के माध्यम से प्राप्त करने के लिए विधि हैंडलर को अपने प्रॉपर तर्क में पारित किया। OnChange विशेषता को इस तरह एक प्रॉपर ऑब्जेक्ट में सेट किया जाएगा: props = {onChange: this.handler} और चाइल्ड कंपोनेंट में पास किया गया है। इसलिए चाइल्ड कंपोनेंट इस प्रॉपर की तरह प्रॉप्स ऑब्जेक्ट में नाम की वैल्यू तक पहुंच सकता है। सहारा सहारा का उपयोग करें। संदर्भ और क्रेडिट: [ blog.bitsrc.io/…

— एनटी

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

ऊपर दिए गए अधिकांश उत्तर React.Component आधारित डिज़ाइनों के लिए हैं। यदि आप 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