js माता पिता घटक

Question

से बच्चे घटक के राज्य बदलने के लिए प्रतिक्रिया मैं दो घटक होते हैं: जनक घटक जहाँ से मैं बच्चे के घटक के राज्य बदलना चाहते हैं:

class ParentComponent extends Component { 
    toggleChildMenu() { 
    ????????? 
    } 
    render() { 
    return (
     <div> 
     <button onClick={toggleChildMenu.bind(this)}> 
      Toggle Menu from Parent 
     </button> 
     <ChildComponent /> 
     </div> 
    ); 
    } 
} 

और बाल घटक:

class ChildComponent extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     open: false; 
    } 
    } 

    toggleMenu() { 
    this.setState({ 
     open: !this.state.open 
    }); 
    } 

    render() { 
    return (
     <Drawer open={this.state.open}/> 
    ); 
    } 
} 

मुझे या तो बाल घटक के को माता-पिता घटक से स्थिति खोलने या बाल कंपोनन को कॉल करने की आवश्यकता है टी के toggleMenu() अभिभावक घटक से जब माता-पिता घटक में बटन क्लिक किया जाता है?

Answer 1

राज्य को मूल घटक में प्रबंधित किया जाना चाहिए। आप संपत्ति जोड़कर open मूल्य को बाल घटक में स्थानांतरित कर सकते हैं।

class ParentComponent extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     open: false 
     }; 

     this.toggleChildMenu = this.toggleChildMenu.bind(this); 
    } 

    toggleChildMenu() { 
     this.setState(state => ({ 
     open: !state.open 
     })); 
    } 

    render() { 
     return (
     <div> 
      <button onClick={this.toggleChildMenu}> 
       Toggle Menu from Parent 
      </button> 
      <ChildComponent open={this.state.open} /> 
     </div> 
     ); 
    } 
} 

class ChildComponent extends Component { 
    render() { 
     return (
     <Drawer open={this.props.open}/> 
    ); 
    } 
} 

Answer 2

जवाब से ऊपर मेरे लिए आंशिक रूप से सही है, लेकिन मेरे परिदृश्य में, मैं क्योंकि मैं मूल्य का इस्तेमाल किया है दिखाने/एक मॉडल टॉगल करने के लिए, एक राज्य के लिए मूल्य निर्धारित करना चाहते हैं। तो मैंने नीचे की तरह इस्तेमाल किया है। उम्मीद है कि यह किसी की मदद करेगा।

class Child extends React.Component { 
    state = { 
    visible:false 
    }; 

    handleCancel = (e) => { 
     e.preventDefault(); 
     this.setState({ visible: false }); 
    }; 

    componentDidMount() { 
    this.props.onRef(this) 
    } 

    componentWillUnmount() { 
    this.props.onRef(undefined) 
    } 

    method() { 
    this.setState({ visible: true }); 
    } 

    render() { 
    return (<Modal title="My title?" visible={this.state.visible} onCancel={this.handleCancel}> 
     {"Content"} 
    </Modal>) 
    } 
} 

class Parent extends React.Component { 
    onClick =() => { 
    this.child.method() // do stuff 
    } 
    render() { 
    return (
     <div> 
     <Child onRef={ref => (this.child = ref)} /> 
     <button onClick={this.onClick}>Child.method()</button> 
     </div> 
    ); 
    } 
} 

संदर्भ - https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542