Reactでコンポーネントの状態をリセットする

Question

React JSでは簡単な問題があります。コンポーネントの状態を切り替える2つの異なるクリックイベントがあります。最初のものは完全に動作しますが、コンポーネントを元の状態に戻すために2番目のイベントを取得することはできません。これは私の問題を取り除いたものですので、クリック機能を子コンポーネントに移すことはできません。私が言ったように

class Parent extends Component{ 
    constructor(){ 
    this.state = { 
     open: false 
    } 
    this.handleOpen = this.handleOpen.bind(this) 
    this.handleClose = this.handleClose.bind(this) 
    } 
    handleOpen(){ 
    this.setState({open: true}) 
    } 
    handleClose(){ 
    this.setState({open: false}) 
    } 
    render(){ 
    return(
    <div> 
     <Child onOpen={this.handleOpen} onClose={this.handleClose} /> 
     <Child onOpen={this.handleOpen} onClose={this.handleClose} /> 
     <Child onOpen={this.handleOpen} onClose={this.handleClose} /> 
     <Child onOpen={this.handleOpen} onClose={this.handleClose} /> 
    </div> 
    ) 
    } 
} 

は、handleOpen機能は、状態を切り替えるが、handleCloseは戻ってそれを切り替えていません。私はhandleClose関数で表示するためにコンソールログを得ることができるので、それはどのように子コンポーネントに接続されているかとは関係ありません。私は状態値が既に切り替えられた後にそれをリセットする方法について何か分かりません。ご協力ありがとうございました！

Answer 1

ここはあなたのやり方です！

class Child extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 
    
 
    handleClick() { 
 
     console.log(this.props.isOpen); 
 
     if (this.props.isOpen) { 
 
     this.props.onClose(); 
 
     } else { 
 
     this.props.onOpen(); 
 
     } 
 
    } 
 

 
    render() { 
 
     return <button onClick={this.handleClick}>Click ME</button>; 
 
    } 
 
} 
 

 
class Parent extends React.Component{ 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     open: false 
 
    } 
 
    this.handleOpen = this.handleOpen.bind(this) 
 
    this.handleClose = this.handleClose.bind(this) 
 
    } 
 
    handleOpen(){ 
 
    this.setState({open: true}) 
 
    } 
 
    handleClose(){ 
 
    this.setState({open: false}) 
 
    } 
 
    render(){ 
 
    return(
 
    <div> 
 
     <p>{this.state.open.toString()}</p> 
 
     <Child onOpen={this.handleOpen} onClose={this.handleClose} isOpen={this.state.open} /> 
 
     <Child onOpen={this.handleOpen} onClose={this.handleClose} isOpen={this.state.open} /> 
 
     <Child onOpen={this.handleOpen} onClose={this.handleClose} isOpen={this.state.open} /> 
 
     <Child onOpen={this.handleOpen} onClose={this.handleClose} isOpen={this.state.open} /> 
 
    </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Parent/>, 
 
    document.getElementById('container') 
 
);