ReactJS: चाइल्ड कंपोनेंट के अंदर पैरेंट पर सेटस्टैट

Question 1

एक बच्चे के घटक से माता-पिता पर सेटस्टेट करने के लिए अनुशंसित पैटर्न क्या है।

var Todos = React.createClass({
  getInitialState: function() {
    return {
      todos: [
        "I am done",
        "I am not done"
      ]
    }
  },

  render: function() {
    var todos = this.state.todos.map(function(todo) {
      return <div>{todo}</div>;
    });

    return <div>
      <h3>Todo(s)</h3>
      {todos}
      <TodoForm />
    </div>;
  }
});

var TodoForm = React.createClass({
  getInitialState: function() {
    return {
      todoInput: ""
    }
  },

  handleOnChange: function(e) {
    e.preventDefault();
    this.setState({todoInput: e.target.value});
  },

  handleClick: function(e) {
    e.preventDefault();
    //add the new todo item
  },

  render: function() {
    return <div>
      <br />
      <input type="text" value={this.state.todoInput} onChange={this.handleOnChange} />
      <button onClick={this.handleClick}>Add Todo</button>
    </div>;
  }
});

React.render(<Todos />, document.body)

मेरे पास todo आइटमों की एक सरणी है जो कि माता-पिता की स्थिति में बनाए रखी जाती है। मैं माता पिता के राज्य का उपयोग और एक नया कार्य करने आइटम जोड़ने, से करना चाहते हैं TodoFormके handleClickघटक। मेरा विचार माता-पिता पर एक सेटस्टैट करना है, जो नए जोड़े गए टूडू आइटम को प्रस्तुत करेगा।

Question 2

अपने माता-पिता में, आप एक फ़ंक्शन बना सकते हैं जैसे addTodoItemकि आवश्यक सेटस्टेट करेंगे और फिर उस फ़ंक्शन को बाल घटक के लिए सहारा के रूप में पास करें।

var Todos = React.createClass({

  ...

  addTodoItem: function(todoItem) {
    this.setState(({ todos }) => ({ todos: { ...todos, todoItem } }));
  },

  render: function() {

    ...

    return <div>
      <h3>Todo(s)</h3>
      {todos}
      <TodoForm addTodoItem={this.addTodoItem} />
    </div>
  }
});

var TodoForm = React.createClass({
  handleClick: function(e) {
    e.preventDefault();
    this.props.addTodoItem(this.state.todoInput);
    this.setState({todoInput: ""});
  },

  ...

});

आप addTodoItemटोडोफॉर्म के हैंडल पर क्लिक कर सकते हैं । यह पैरेंट पर एक सेटस्टैट करेगा जो नए जोड़े गए टूडू आइटम को रेंडर करेगा। आशा है आपको आइडिया मिल जाएगा।

इधर उधर करना।

Question 3

ये सभी अनिवार्य रूप से सही हैं, मैंने सोचा था कि मैं नए (ish) आधिकारिक प्रतिक्रिया प्रलेखन की ओर इशारा करूंगा जो मूल रूप से अनुशंसा करता है: -

किसी भी डेटा के लिए एक "सत्य का स्रोत" होना चाहिए जो एक प्रतिक्रिया एप्लिकेशन में बदलता है। आमतौर पर, राज्य को पहले उस घटक में जोड़ा जाता है जिसे रेंडर करने के लिए इसकी आवश्यकता होती है। फिर, यदि अन्य घटकों को भी इसकी आवश्यकता होती है, तो आप इसे अपने निकटतम सामान्य पूर्वज तक उठा सकते हैं। विभिन्न घटकों के बीच राज्य को सिंक करने की कोशिश करने के बजाय, आपको ऊपर-नीचे डेटा प्रवाह पर भरोसा करना चाहिए।

Https://reactjs.org/docs/lifting-state-up.html देखें । पेज एक उदाहरण के माध्यम से भी काम करता है।

Question 4

आप मूल घटक में एक AddTodo फ़ंक्शन बना सकते हैं, इसे उस संदर्भ में बाँध सकते हैं, इसे चाइल्ड घटक को पास कर सकते हैं और इसे वहां से कॉल कर सकते हैं।

// in Todos
addTodo: function(newTodo) {
    // add todo
}

फिर, टोडोस.रेंडर में, आप करेंगे

<TodoForm addToDo={this.addTodo.bind(this)} />

टोडोफॉर्म में इसे कॉल करें

this.props.addToDo(newTodo);

Question 5

उन लोगों के लिए जो रिएक्ट हुक के साथ राज्य बनाए हुए हैं useState, मैंने नीचे दिए गए डेमो स्लाइडर ऐप बनाने के लिए उपरोक्त सुझावों को अनुकूलित किया। डेमो ऐप में, चाइल्ड स्लाइडर घटक माता-पिता की स्थिति को बनाए रखता है।

डेमो भी useEffectहुक का उपयोग करता है । (और कम महत्वपूर्ण बात, useRefहुक)

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

//the parent react component
function Parent() {

  // the parentState will be set by its child slider component
  const [parentState, setParentState] = useState(0);

  // make wrapper function to give child
  const wrapperSetParentState = useCallback(val => {
    setParentState(val);
  }, [setParentState]);

  return (
    <div style={{ margin: 30 }}>
      <Child
        parentState={parentState}
        parentStateSetter={wrapperSetParentState}
      />
      <div>Parent State: {parentState}</div>
    </div>
  );
};

//the child react component
function Child({parentStateSetter}) {
  const childRef = useRef();
  const [childState, setChildState] = useState(0);

  useEffect(() => {
    parentStateSetter(childState);
  }, [parentStateSetter, childState]);

  const onSliderChangeHandler = e => {
  //pass slider's event value to child's state
    setChildState(e.target.value);
  };

  return (
    <div>
      <input
        type="range"
        min="1"
        max="255"
        value={childState}
        ref={childRef}
        onChange={onSliderChangeHandler}
      ></input>
    </div>
  );
};

export default Parent;

Question 6

parentSetState={(obj) => { this.setState(obj) }}

Question 7

मुझे बच्चे के घटक से मूल घटक तक तर्क पारित करने के लिए निम्नलिखित कार्य और सरल समाधान मिला:

//ChildExt component
class ChildExt extends React.Component {
    render() {
        var handleForUpdate =   this.props.handleForUpdate;
        return (<div><button onClick={() => handleForUpdate('someNewVar')}>Push me</button></div>
        )
    }
}

//Parent component
class ParentExt extends React.Component {   
    constructor(props) {
        super(props);
        var handleForUpdate = this.handleForUpdate.bind(this);
    }
    handleForUpdate(someArg){
            alert('We pass argument from Child to Parent: \n' + someArg);   
    }

    render() {
        var handleForUpdate =   this.handleForUpdate;    
        return (<div>
                    <ChildExt handleForUpdate = {handleForUpdate.bind(this)} /></div>)
    }
}

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

JSFIDDLE को देखें

Question 8

यदि आप माता-पिता के रूप में एक क्लास घटक के साथ काम कर रहे हैं, तो एक बच्चे को एक सेटस्टैट पास करने का एक बहुत ही सरल तरीका एक तीर फ़ंक्शन के भीतर से गुजर रहा है। यह काम करता है क्योंकि यह एक फहराया गया वातावरण सेट करता है जिसे पास किया जा सकता है:

class ClassComponent ... {

    modifyState = () =>{
        this.setState({...})   
    }
    render(){
          return <><ChildComponent parentStateModifier={modifyState} /></>
    }
}